Candle Flame Loader

<div class="ldr-candle" role="status" aria-label="Loading">
  <span class="ldr-candle-glow"></span>
  <span class="ldr-candle-flame"></span>
</div>

.ldr-candle {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  background: linear-gradient(var(--c) 0 0) 50% calc(var(--s) * 0.42) / calc(var(--s) / 26) calc(var(--s) * 0.09) no-repeat;
}
.ldr-candle::before {
  content: "";
  position: absolute;
  left: 38%;
  bottom: 10%;
  width: 24%;
  height: 42%;
  border-radius: calc(var(--s) / 30) calc(var(--s) / 30) 0 0;
  background: linear-gradient(90deg, transparent 18%, color-mix(in srgb, var(--c) 55%, #fff) 18% 34%, transparent 34%), var(--c);
}
.ldr-candle::after {
  content: "";
  position: absolute;
  left: 22%;
  bottom: 6%;
  width: 56%;
  height: calc(var(--s) / 14);
  border-radius: var(--s);
  background: var(--c);
}
.ldr-candle-glow {
  position: absolute;
  left: 50%;
  top: 30%;
  width: calc(var(--s) * 0.8);
  height: calc(var(--s) * 0.8);
  margin: calc(var(--s) * -0.4) 0 0 calc(var(--s) * -0.4);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ldr-color, #3b82f6) 28%, transparent), transparent);
  animation: ldr-candle-glow 2.4s ease-in-out infinite;
}
.ldr-candle-flame {
  position: absolute;
  left: 50%;
  bottom: 53%;
  width: calc(var(--s) * 0.18);
  height: calc(var(--s) * 0.3);
  margin-left: calc(var(--s) * -0.09);
  transform-origin: 50% 100%;
  animation: ldr-candle-flicker 1.3s ease-in-out infinite;
}
.ldr-candle-flame::before,
.ldr-candle-flame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--s) * 0.18);
  height: calc(var(--s) * 0.18);
  margin-left: calc(var(--s) * -0.09);
  border-radius: 50% 0 50% 50%;
  background: var(--c);
  transform: scaleY(1.45) rotate(-45deg);
  transform-origin: 50% 100%;
}
.ldr-candle-flame::after {
  bottom: calc(var(--s) * 0.015);
  width: calc(var(--s) * 0.09);
  height: calc(var(--s) * 0.09);
  margin-left: calc(var(--s) * -0.045);
  background: color-mix(in srgb, var(--c) 25%, #fff);
}
@keyframes ldr-candle-flicker {
  0%, 100% { transform: scale(1, 1) skewX(0); }
  20%      { transform: scale(0.94, 1.1) skewX(4deg); }
  40%      { transform: scale(1.04, 0.92) skewX(-3deg); }
  60%      { transform: scale(0.96, 1.06) skewX(2deg); }
  80%      { transform: scale(1.02, 0.96) skewX(-4deg); }
}
@keyframes ldr-candle-glow {
  0%, 100% { transform: scale(0.85); opacity: 0.7; }
  50%      { transform: scale(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-candle, .ldr-candle *, .ldr-candle::before, .ldr-candle::after, .ldr-candle *::before, .ldr-candle *::after {
    animation-duration: 3s;
  }
}

Similar loaders