Aurora Ring Spinner
A ring painted with a three-hue conic gradient spins over a blurred copy of itself, so it glows in shifting color. The extra hues come from your accent via relative color syntax.
Also known as: aurora loader, blurred gradient spinner, gradient glow ring.
HTML
<div class="ldr-aurora-ring" role="status" aria-label="Loading"> <span class="ldr-aurora-ring-glow"></span> </div>
CSS
.ldr-aurora-ring {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
--t: calc(var(--s) / 8);
--ring: conic-gradient(from 0deg, var(--c), oklch(from var(--c) l c calc(h + 70)), oklch(from var(--c) l c calc(h - 70)), var(--c));
--hole: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
position: relative;
width: var(--s);
height: var(--s);
animation: ldr-aurora-ring-spin 1.4s linear infinite;
}
.ldr-aurora-ring::after,
.ldr-aurora-ring-glow::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--ring);
-webkit-mask: var(--hole);
mask: var(--hole);
}
.ldr-aurora-ring-glow {
position: absolute;
inset: 0;
filter: blur(calc(var(--s) / 7));
animation: ldr-aurora-ring-breathe 2.8s ease-in-out infinite;
}
@keyframes ldr-aurora-ring-spin {
to { transform: rotate(360deg); }
}
@keyframes ldr-aurora-ring-breathe {
0%, 100% { opacity: 0.45; transform: scale(0.92); }
50% { opacity: 0.95; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-aurora-ring, .ldr-aurora-ring *, .ldr-aurora-ring::before, .ldr-aurora-ring::after, .ldr-aurora-ring *::before, .ldr-aurora-ring *::after {
animation-duration: 3s;
}
}Tailwind CSS version
The same loader using only Tailwind's built-in animation utilities. No custom keyframes or config needed.
<div class="relative h-12 w-12 animate-spin [animation-duration:1.4s]" role="status" aria-label="Loading">
<div class="absolute inset-0 animate-pulse blur-md">
<div class="h-full w-full rounded-full bg-[conic-gradient(#3b82f6,#d946ef,#14b8a6,#3b82f6)] [mask:radial-gradient(farthest-side,transparent_calc(100%_-_6px),#000_calc(100%_-_5px))]"></div>
</div>
<div class="absolute inset-0 rounded-full bg-[conic-gradient(#3b82f6,#d946ef,#14b8a6,#3b82f6)] [mask:radial-gradient(farthest-side,transparent_calc(100%_-_6px),#000_calc(100%_-_5px))]"></div>
</div>Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.