CSS loader generator for one element, no library

Because an outer box-shadow is never painted inside the border box of the element that casts it. A shadow at 0 0 with no spread sits exactly under the element and is clipped away in full, so the classic box-shadow: -20px 0, 0 0, 20px 0 draws two dots and not three. The fix is to let the element itself be the middle dot — give it the background color and animate that alongside the two shadows — or to add a spread large enough to reach past the edge. Both dot loaders here take the first route.

Only if it animates transform or opacity, which are the two the compositor can run on its own thread. That is the whole reason the ring, the dual ring, the conic sweep and the blade tick are all rotations: they survive a blocked main thread, which is the exact condition a loader exists to sit through. The dots, the pulse and the bars animate color, box-shadow and mask-size, all of which are repainted on the main thread — they look better and they will visibly stutter or stall while a long task runs. Pick a rotation for anything that covers a real network wait.

You still need it if your support matrix reaches back at all. Safari only accepted the unprefixed mask shorthand from 15.4 in March 2022 and Chrome from version 120 in December 2023, so a stylesheet shipping only the standard property silently loses the hole in the middle of the ring on anything older and shows a solid disc instead. Both lines are emitted here, prefix first, and the same applies to mask-composite, whose WebKit spelling is source-in where the standard word is intersect.

Because a continuous rotation smears the twelve ticks into a flat grey ring. The blade shape comes from a repeating-conic-gradient with a 9° tick inside every 30° sector; rotating it smoothly moves each tick into the position of the next one and the eye integrates the whole thing into a solid annulus. steps(12) advances exactly one sector per step, so each frame lands a tick where a tick already was and only the brightness moves — which is the illusion the iOS and macOS spinners have always used.

The stylesheet you pasted it into is using content-box sizing. A 48px ring with a 5px border measures 48px under border-box and 58px under content-box, because in the second case the border is added to the width rather than taken out of it. Tailwind, Bootstrap and most resets set border-box globally, so the difference only bites in a codebase that has no reset — which is why both border loaders here write box-sizing: border-box into the rule itself rather than relying on yours.

The motion should go; the indicator must not. A spinner is not decoration — it is the only evidence the page gives that something is still happening, so deleting it under prefers-reduced-motion leaves a user staring at a screen with no signal at all. The two honest answers are to slow the cycle down until it is no longer a fast repeating rotation, or to keep the shape on screen with animation: none and let the live-region text carry the state. This generator writes whichever of the two you pick, and the shape stays visible in both.

By the text inside the live region changing, not by the spinner disappearing. role="status" is a polite live region, so replacing “Loading…” with “Results ready” in that same node queues an announcement at the next pause; removing the whole element instead announces nothing, because a node that has left the document cannot notify anyone. Two habits that follow from that: render the status node before the wait starts rather than injecting it with the spinner, and put aria-busy on the region being replaced, not on the spinner itself.