Wiring the generated loader into a real app
The generated snippet is intentionally framework-free — one element plus a keyframe block — which makes integration mostly a question of where the CSS lives. In React/Vue/Svelte, paste the CSS into your global stylesheet (or a CSS module) and render the element conditionally: {isLoading && <span className="loader" />}. Add role="status" and aria-label="Loading" to the element so screen readers announce the wait instead of silence. One subtle bug to avoid: don’t unmount the loader the instant data arrives if that’s under ~200 ms after showing it — a spinner that flashes for two frames looks broken; either delay its appearance by 300 ms or guarantee it a minimum display time.
Customizing beyond the sliders
The generated keyframe is a starting point that takes well to small edits:
- Easing — swap
linearforcubic-bezier(0.6, 0.1, 0.4, 0.9)to get a spinner that accelerates through the bottom of its arc; subtle, but it reads as more refined. - Dual rings — duplicate the element, halve the size of the second, reverse its direction (
animation-direction: reverse), and nest them for a classic two-ring loader. - Brand-colored track — instead of a gray track, use a 15–20% opacity version of your accent color (
color-mix(in srgb, var(--accent) 18%, transparent)) so the loader stays on-brand in both themes. - Size by context — 16–20 px inline next to button text, 32–48 px for panel-level loads, larger only for full-page boots.
Why pure CSS beats GIFs and JS spinners
A CSS loader weighs a few hundred bytes against tens of kilobytes for a GIF, renders crisply at any DPI (GIFs alias on retina screens), inherits theme colors at runtime — one loader serves dark and light modes — and animates on the compositor thread, so it keeps spinning even while the main thread is busy doing the very work you’re waiting for. That last property is the practical one: a JavaScript-driven animation freezes exactly when the page blocks, displaying a frozen spinner at the moment users most need reassurance. The browser support story closed years ago; there is no remaining reason to ship image-based spinners.