Rainbow Arcs Loader
Three nested half circles flip over one after another, pausing between turns so the rainbow keeps folding into itself. The stagger is a single animation-delay driven by a --i custom property.
Also known as: nested semicircle loader, rainbow spinner, stacked arcs animation.
HTML
<svg class="ldr-rainbow-arcs" viewBox="0 0 48 48" role="status" aria-label="Loading"> <path style="--i: 0" d="M4 24a20 20 0 0 1 40 0"></path> <path style="--i: 1" d="M10.5 24a13.5 13.5 0 0 1 27 0"></path> <path style="--i: 2" d="M17 24a7 7 0 0 1 14 0"></path> </svg>
CSS
.ldr-rainbow-arcs {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
width: var(--s);
height: var(--s);
}
.ldr-rainbow-arcs path {
fill: none;
stroke: var(--c);
stroke-width: 4.5;
stroke-linecap: round;
opacity: calc(1 - var(--i) * 0.28);
transform-origin: center;
animation: ldr-rainbow-arcs-flip 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
animation-delay: calc(var(--i) * 0.12s);
}
@keyframes ldr-rainbow-arcs-flip {
0% { transform: rotate(0deg); }
35%, 50% { transform: rotate(180deg); }
85%, 100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ldr-rainbow-arcs, .ldr-rainbow-arcs *, .ldr-rainbow-arcs::before, .ldr-rainbow-arcs::after, .ldr-rainbow-arcs *::before, .ldr-rainbow-arcs *::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.