Spiral Dots Loader
Ten dots set along a spiral arm all spin with the same eased turn, a few hundredths of a second apart, so the arm winds tighter and loosens again on every lap.
Also known as: galaxy dots loader, swirling dots spinner, spiral of dots.
HTML
<div class="ldr-spiral-dots" role="status" aria-label="Loading"> <span style="--i:0"></span><span style="--i:1"></span><span style="--i:2"></span><span style="--i:3"></span><span style="--i:4"></span> <span style="--i:5"></span><span style="--i:6"></span><span style="--i:7"></span><span style="--i:8"></span><span style="--i:9"></span> </div>
CSS
.ldr-spiral-dots {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: var(--s);
height: var(--s);
}
.ldr-spiral-dots span {
position: absolute;
inset: 0;
rotate: calc(var(--i) * -24deg);
animation: ldr-spiral-dots-spin 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
animation-delay: calc(var(--i) * 0.07s - 2s);
}
.ldr-spiral-dots span::before {
content: "";
--d: calc(var(--s) * (0.06 + var(--i) * 0.009));
position: absolute;
top: calc(50% - var(--s) * (0.07 + var(--i) * 0.038) - var(--d) / 2);
left: calc(50% - var(--d) / 2);
width: var(--d);
height: var(--d);
border-radius: 50%;
background: var(--c);
}
@keyframes ldr-spiral-dots-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-spiral-dots, .ldr-spiral-dots *, .ldr-spiral-dots::before, .ldr-spiral-dots::after, .ldr-spiral-dots *::before, .ldr-spiral-dots *::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" role="status" aria-label="Loading"> <span class="absolute inset-0 rotate-0"><span class="absolute inset-0 animate-[spin_2s_cubic-bezier(0.65,0,0.35,1)_infinite] [animation-delay:-2.00s]"><span class="absolute left-1/2 top-[40.00%] h-[2.88px] w-[2.88px] -translate-x-1/2 rounded-full bg-blue-500"></span></span></span> <span class="absolute inset-0 rotate-[-24deg]"><span class="absolute inset-0 animate-[spin_2s_cubic-bezier(0.65,0,0.35,1)_infinite] [animation-delay:-1.93s]"><span class="absolute left-1/2 top-[35.75%] h-[3.31px] w-[3.31px] -translate-x-1/2 rounded-full bg-blue-500"></span></span></span> <span class="absolute inset-0 rotate-[-48deg]"><span class="absolute inset-0 animate-[spin_2s_cubic-bezier(0.65,0,0.35,1)_infinite] [animation-delay:-1.86s]"><span class="absolute left-1/2 top-[31.50%] h-[3.74px] w-[3.74px] -translate-x-1/2 rounded-full bg-blue-500"></span></span></span> <span class="absolute inset-0 rotate-[-72deg]"><span class="absolute inset-0 animate-[spin_2s_cubic-bezier(0.65,0,0.35,1)_infinite] [animation-delay:-1.79s]"><span class="absolute left-1/2 top-[27.25%] h-[4.18px] w-[4.18px] -translate-x-1/2 rounded-full bg-blue-500"></span></span></span> <span class="absolute inset-0 rotate-[-96deg]"><span class="absolute inset-0 animate-[spin_2s_cubic-bezier(0.65,0,0.35,1)_infinite] [animation-delay:-1.72s]"><span class="absolute left-1/2 top-[23.00%] h-[4.61px] w-[4.61px] -translate-x-1/2 rounded-full bg-blue-500"></span></span></span> <span class="absolute inset-0 rotate-[-120deg]"><span class="absolute inset-0 animate-[spin_2s_cubic-bezier(0.65,0,0.35,1)_infinite] [animation-delay:-1.65s]"><span class="absolute left-1/2 top-[18.75%] h-[5.04px] w-[5.04px] -translate-x-1/2 rounded-full bg-blue-500"></span></span></span> <span class="absolute inset-0 rotate-[-144deg]"><span class="absolute inset-0 animate-[spin_2s_cubic-bezier(0.65,0,0.35,1)_infinite] [animation-delay:-1.58s]"><span class="absolute left-1/2 top-[14.50%] h-[5.47px] w-[5.47px] -translate-x-1/2 rounded-full bg-blue-500"></span></span></span> <span class="absolute inset-0 rotate-[-168deg]"><span class="absolute inset-0 animate-[spin_2s_cubic-bezier(0.65,0,0.35,1)_infinite] [animation-delay:-1.51s]"><span class="absolute left-1/2 top-[10.25%] h-[5.90px] w-[5.90px] -translate-x-1/2 rounded-full bg-blue-500"></span></span></span> <span class="absolute inset-0 rotate-[-192deg]"><span class="absolute inset-0 animate-[spin_2s_cubic-bezier(0.65,0,0.35,1)_infinite] [animation-delay:-1.44s]"><span class="absolute left-1/2 top-[6.00%] h-[6.34px] w-[6.34px] -translate-x-1/2 rounded-full bg-blue-500"></span></span></span> <span class="absolute inset-0 rotate-[-216deg]"><span class="absolute inset-0 animate-[spin_2s_cubic-bezier(0.65,0,0.35,1)_infinite] [animation-delay:-1.37s]"><span class="absolute left-1/2 top-[1.75%] h-[6.77px] w-[6.77px] -translate-x-1/2 rounded-full bg-blue-500"></span></span></span> </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.