Magic Wand Loader: Pure CSS Loading Animation

Magic Wand Loader

A wand with a star on its tip waves back and forth while small sparkles pop into the air it just left. A friendly 'working some magic' state for AI rewrite and enhance buttons.

Also known as: magic wand animation, ai magic loading, sparkle wand icon.

Color Size 64px Dark background

HTML

<div class="ldr-magic-wand" role="status" aria-label="Working some magic">
  <svg viewBox="0 0 32 32" aria-hidden="true">
    <g class="ldr-magic-wand-wand">
      <path class="ldr-magic-wand-stick" d="M5 27 17.5 14.5"/>
      <g transform="translate(16.5 4.5) scale(0.46)"><path class="ldr-magic-wand-tip" d="M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z"/></g>
    </g>
    <g transform="translate(25 14.5) scale(0.22)"><path class="ldr-magic-wand-spark" d="M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z"/></g>
    <g transform="translate(11 3) scale(0.17)"><path class="ldr-magic-wand-spark ldr-magic-wand-late" d="M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z"/></g>
    <g transform="translate(26.5 3) scale(0.15)"><path class="ldr-magic-wand-spark ldr-magic-wand-later" d="M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z"/></g>
  </svg>
</div>

CSS

.ldr-magic-wand {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: calc(var(--s) * 1.25);
  height: calc(var(--s) * 1.25);
}
.ldr-magic-wand svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ldr-magic-wand-wand {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: ldr-magic-wand-wave 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-magic-wand-stick {
  fill: none;
  stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  stroke-width: 3;
  stroke-linecap: round;
}
.ldr-magic-wand-tip {
  fill: var(--c);
  transform-box: fill-box;
  transform-origin: center;
  animation: ldr-magic-wand-glint 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ldr-magic-wand-spark {
  fill: var(--c);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: ldr-magic-wand-pop 1.6s infinite;
}
.ldr-magic-wand-late { animation-delay: 0.53s; }
.ldr-magic-wand-later { animation-delay: 1.07s; }
@keyframes ldr-magic-wand-wave {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(6deg); }
}
@keyframes ldr-magic-wand-glint {
  0%, 100% { transform: scale(0.85) rotate(0deg); }
  50%      { transform: scale(1.1) rotate(45deg); }
}
@keyframes ldr-magic-wand-pop {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  30% {
    transform: scale(1) rotate(45deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  65%, 100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

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

Customizing this loader

Color: set --ldr-color on the element or a parent. Currently previewing #3b82f6.
Size: set --ldr-size. Every dimension in the snippet is derived from it. Currently previewing 64px.
Speed: change the duration on the animation shorthand. Delays on the children are relative, so they keep their rhythm.
Accessibility: the root carries role="status" and an aria-label so screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.

Magic Wand Loader

HTML

CSS

Customizing this loader

Similar loaders