AI CSS Animations

Spiral Spinner

A spiral that turns steadily, so the line seems to pour endlessly toward the middle. Hypnotic in a good way for longer waits, and it is one precomputed SVG path on a linear rotation.

Also known as: hypnotic spiral loader, swirl loading animation, vortex spinner.

HTML

<svg class="ldr-spiral-spinner" viewBox="0 0 48 48" role="status" aria-label="Loading">
  <path d="M24 22.5C24.2 22.5 24.7 22.2 25 22.2C25.4 22.2 25.9 22.4 26.3 22.7C26.6 23 27 23.5 27.2 24C27.3 24.5 27.4 25.3 27.2 25.9C27.1 26.5 26.7 27.2 26.2 27.7C25.6 28.2 24.8 28.7 24 28.9C23.2 29 22.2 29 21.3 28.7C20.4 28.4 19.5 27.8 18.8 27C18.2 26.2 17.6 25.1 17.5 24C17.3 22.9 17.4 21.6 17.8 20.4C18.3 19.3 19.1 18.1 20.2 17.4C21.2 16.6 22.6 15.9 24 15.8C25.4 15.6 27 15.8 28.4 16.4C29.7 17 31.2 18.1 32.1 19.3C33 20.6 33.7 22.3 33.9 24C34.1 25.7 33.8 27.6 33.1 29.2C32.3 30.8 31 32.5 29.5 33.6C28 34.6 25.9 35.4 24 35.6C22.1 35.8 19.8 35.4 17.9 34.5C16.1 33.7 14.2 32.1 13 30.4C11.8 28.6 10.9 26.2 10.7 24C10.6 21.8 11 19.2 12 17.1C13 15 14.8 12.9 16.8 11.5C18.8 10.2 21.5 9.2 24 9C26.5 8.9 29.4 9.4 31.8 10.6C34.1 11.7 36.4 13.7 37.9 16C39.4 18.2 40.5 21.2 40.6 24C40.8 26.8 40.2 30 38.9 32.6C37.6 35.2 35.4 37.8 32.9 39.4C30.4 41 27.1 42.2 24 42.3C20.9 42.5 17.4 41.8 14.6 40.3C11.8 38.9 8.9 36.4 7.2 33.7C5.4 31 4.5 25.6 4 24"></path>
</svg>

CSS

.ldr-spiral-spinner {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  width: var(--s);
  height: var(--s);
  animation: ldr-spiral-spinner-spin 1s linear infinite;
}
.ldr-spiral-spinner path {
  fill: none;
  stroke: var(--c);
  stroke-width: 3;
  stroke-linecap: round;
}
@keyframes ldr-spiral-spinner-spin {
  to { transform: rotate(360deg); }
}

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

Tailwind CSS version

The same loader using only Tailwind's built-in animation utilities. No custom keyframes or config needed.

<svg class="h-12 w-12 animate-spin text-blue-500" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" role="status" aria-label="Loading">
  <path d="M24 22.5C24.2 22.5 24.7 22.2 25 22.2C25.4 22.2 25.9 22.4 26.3 22.7C26.6 23 27 23.5 27.2 24C27.3 24.5 27.4 25.3 27.2 25.9C27.1 26.5 26.7 27.2 26.2 27.7C25.6 28.2 24.8 28.7 24 28.9C23.2 29 22.2 29 21.3 28.7C20.4 28.4 19.5 27.8 18.8 27C18.2 26.2 17.6 25.1 17.5 24C17.3 22.9 17.4 21.6 17.8 20.4C18.3 19.3 19.1 18.1 20.2 17.4C21.2 16.6 22.6 15.9 24 15.8C25.4 15.6 27 15.8 28.4 16.4C29.7 17 31.2 18.1 32.1 19.3C33 20.6 33.7 22.3 33.9 24C34.1 25.7 33.8 27.6 33.1 29.2C32.3 30.8 31 32.5 29.5 33.6C28 34.6 25.9 35.4 24 35.6C22.1 35.8 19.8 35.4 17.9 34.5C16.1 33.7 14.2 32.1 13 30.4C11.8 28.6 10.9 26.2 10.7 24C10.6 21.8 11 19.2 12 17.1C13 15 14.8 12.9 16.8 11.5C18.8 10.2 21.5 9.2 24 9C26.5 8.9 29.4 9.4 31.8 10.6C34.1 11.7 36.4 13.7 37.9 16C39.4 18.2 40.5 21.2 40.6 24C40.8 26.8 40.2 30 38.9 32.6C37.6 35.2 35.4 37.8 32.9 39.4C30.4 41 27.1 42.2 24 42.3C20.9 42.5 17.4 41.8 14.6 40.3C11.8 38.9 8.9 36.4 7.2 33.7C5.4 31 4.5 25.6 4 24"></path>
</svg>

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.

Similar loaders

Ring Spinner
Dual Ring Spinner
Dashed Ring Spinner
Gradient Ring Spinner