Free CSS Loader / Spinner Generator

A short history of the CSS animation that powers your spinner

The @keyframes rule and the animation shorthand that this generator emits are defined in CSS Animations Module Level 1. The first W3C Working Draft was published 20 March 2009 and the spec finally reached W3C Recommendation on 11 December 2018, nine years later. By then every shipping browser had supported the syntax for years: Safari 4 (June 2009) with the -webkit- prefix, Firefox 5 (June 2011), Internet Explorer 10 (October 2012), and unprefixed by Chrome 43 in April 2015. CSS Animations Module Level 2 is the current Working Draft and adds scroll-driven animations through animation-timeline (shipping in Chrome 115, July 2023; Safari and Firefox followed in late 2024). The rotation in the «spinner» preset comes from CSS Transforms Module Level 1, a separate spec at Candidate Recommendation since February 2019 but universally shipped: transform: rotate(360deg) at 100% inside a @keyframes block is what spins the ring.

Accessibility is not optional: the «Reduce Motion» preference

Every operating system released since 2014 ships a «Reduce Motion» accessibility setting, macOS «Reduce motion» (in Accessibility → Display), iOS «Reduce Motion», Windows «Show animations», Android «Remove animations», GNOME «Enable animations» off. The prefers-reduced-motion media query (defined in Media Queries Level 5, W3C First Public Working Draft November 2017) lets your CSS detect this preference and stop the spinner. Always wrap any spinner in:

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

WCAG 2.1 Success Criterion 2.3.3 «Animation from Interactions» (Level AAA, W3C Recommendation 5 June 2018) requires that any motion animation triggered by interaction can be disabled unless the motion is essential. A spinner is rarely essential. WCAG 2.2 (October 2023) inherits the same rule.

For screen readers, wrap the spinner in <div role=\"status\" aria-live=\"polite\"> with a visually-hidden «Loading…» text. When the load completes, replace the contents; the live region announces «Loaded» to assistive tech without yelling. Set aria-busy=\"true\" on the containing region while loading and aria-busy=\"false\" after. This pattern is documented in the W3C ARIA Authoring Practices Guide live-regions chapter.

Why CSS spinners stay smooth at 60 fps

Modern browser rendering pipelines have three stages: layout (computing positions), paint (filling pixels), and composite (combining layers on the GPU). The transform and opacity properties are the only two that skip layout and paint and run purely on the compositor thread. Animating them is essentially free at any framerate. Animating width, height, top, left, margin, or anything that changes the box model forces a full layout-and-paint pass on every frame and quickly drops below 60 fps on low-end devices. Every preset in this generator animates only transform and opacity for this reason. If you need a hint to the browser, will-change: transform (defined in CSS Will Change Module Level 1, W3C Candidate Recommendation 26 April 2022) promotes the element to its own compositor layer; use sparingly because each layer costs GPU memory.

When a spinner is the right answer, and when it is not

In Response Times: The 3 Important Limits (1993, restated 2014), Jakob Nielsen of the Nielsen Norman Group defined three perception thresholds: 0.1 second is «instant», 1 second is the limit for uninterrupted flow of thought, 10 seconds is the limit for keeping the user's attention. Map your loader strategy to these:

• Under 1 second: no indicator at all. A spinner that flashes for 300 ms is worse than no spinner: the eye registers the flicker as a glitch.
• 1 to 5 seconds: an indeterminate spinner or barber-pole bar. Tells the user «something is happening» without committing to a duration.
• 5 to 10 seconds: a determinate <progress max=\"100\" value=\"42\"> with a percentage. Users tolerate a long wait better when they can see progress.
• SPA route navigation: a skeleton screen (grey placeholder boxes mimicking the final layout) feels faster than a spinner. Luke Wroblewski coined the term in his March 2013 post Mobile First Patterns; Facebook's «shimmer» (2014) and Google's Material 2 (May 2018) made it mainstream.

Easing functions and what each one feels like

The animation-timing-function property (and the CSS Easing Functions Module Level 1, Candidate Recommendation 6 December 2022) chooses how the value progresses between keyframes:

• linear: constant rate. Right for a continuous spinner; wrong for anything decelerating into a final state.
• ease, ease-in, ease-out, ease-in-out: keyword aliases for common cubic bezier curves. Browser default is ease.
• cubic-bezier(x1, y1, x2, y2): custom curve with four floats in [0, 1]. cubic-bezier(.25, .1, .25, 1) is the standard «ease» curve. Try cubic-bezier(.68, -.55, .27, 1.55) for an «overshoot» bounce effect.
• steps(n, jump-end): discrete jumps, ideal for a dots-loader that swaps state without interpolating.

Common mistakes

• Shipping a spinner without prefers-reduced-motion. Users with vestibular disorders, migraine triggers, or attention sensitivities get hit by every rotating ring on the web. The fix is two lines of CSS.
• Forgetting role=\"status\" and visually-hidden text. A spinner that only spins visually tells a screen-reader user nothing.
• Animation speed under 0.5 seconds per cycle. A spinner that completes in 0.3 s feels frantic and reads as «error» to many users. 1 to 1.5 s per cycle is the comfortable range.
• Animating layout properties. Animating width, margin, or top causes layout thrash. Stick to transform and opacity.
• Showing a spinner for every operation. If the data arrives within 100 ms, the spinner flashes and reads as a glitch. Delay the spinner by 200 to 300 ms with a setTimeout that you clear on success.
• Forgetting to center the spinner. A `.spinner` floating in the top-left of a section because its container is not a flex/grid container is the second most common visual bug.

More frequently asked questions

Will these spinners work in old browsers?

All modern browsers (Chrome 43+, Firefox 16+, Safari 9+, Edge 12+) support @keyframes and transform without any prefix. Internet Explorer 10 and 11 require the -ms- prefix in some places but otherwise work. IE 9 and below have no CSS animation support: fall back to an animated GIF, or use @supports (animation: spin 1s) to feature-detect.

How do I stop the spinner when content loads?

Either remove the element from the DOM, hide it with display: none or hidden attribute, or pause the animation with animation-play-state: paused. Pausing is cheapest if you might show it again. If you used the ARIA pattern, also set aria-busy=\"false\" on the container and replace the loading text with the loaded state announcement.

Can I customise the spinner colors further than the picker allows?

Yes. The output CSS uses regular hex / rgb / hsl values; replace them with CSS variables (var(--brand-primary)) so the spinner follows your design system. For a dual-color spinner, edit the border-color shorthand: border-color: var(--brand) transparent transparent transparent gives the classic «one-quarter-arc» look.

Why not just use a SVG or Lottie animation?

CSS spinners weigh under 200 bytes, need no extra request, no JavaScript runtime, and render before any external resources load. SVG is great for complex shapes; Lottie is great for designer-authored animations from After Effects. For a generic «something is loading» indicator, CSS is the cheapest tool that does the job correctly.

Is anything tracked or sent to a server?

No. The generator runs entirely in your browser's JavaScript. Your colour picks, size adjustments, and copied CSS never leave the page. Verify in the Network tab of DevTools.