Slinky Loader
Ten coils flip over a shared pivot one after another, arching like a slinky toy passed from hand to hand, then flip back. Each coil is an ellipse with a staggered delay.
Also known as: slinky animation, coil flip loader, spring toy loader.
HTML
<div class="ldr-slinky" 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-slinky {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
position: relative;
width: calc(var(--s) * 1.3);
height: calc(var(--s) * 0.72);
}
.ldr-slinky span {
position: absolute;
top: calc(var(--s) * 0.56);
right: calc(50% + var(--s) * 0.14);
width: calc(var(--s) * 0.44);
height: calc(var(--s) * 0.16);
box-sizing: border-box;
border: calc(var(--s) / 30) solid var(--c);
border-radius: 50%;
transform-origin: calc(100% + var(--s) * 0.14) 50%;
animation: ldr-slinky-flip 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
animation-delay: calc(var(--i) * 0.05s);
}
@keyframes ldr-slinky-flip {
from { transform: rotate(0deg); }
to { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-slinky, .ldr-slinky *, .ldr-slinky::before, .ldr-slinky::after, .ldr-slinky *::before, .ldr-slinky *::after {
animation-duration: 3s;
}
}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.