CSS Loader & Spinner Generator
12 pure-CSS loaders with size, colour and speed controls and ready-to-paste code.
Click a loader to build its HTML and CSS below.
About CSS Loader & Spinner Generator
Spinning an element with transform: rotate is handled on the browser's compositor and never blocks the main thread; build the same motion by animating width or margin and the browser re-runs layout on every frame, so the loader stutters exactly when the page is busiest. All 12 loaders here are pure CSS, and apart from Ripple every one animates only transform and opacity. Set the size, thickness, cycle duration and two colours, then take the ready HTML and CSS.
How to use CSS Loader & Spinner Generator
- 1
Pick one of the 12 loaders in the gallery — the selected card gets a cyan border.
- 2
Set the size, line thickness and cycle duration with the sliders; all 12 previews update together.
- 3
Choose the main and second colour, then flip the preview background between dark and light to check contrast in both themes.
- 4
Change the aria-label text and tick the prefers-reduced-motion option if you need them.
- 5
Copy the HTML and the CSS separately or together and paste them straight into your project.
Frequently asked questions
Do these loaders need JavaScript or an image file?
No. The output is a plain div plus a few CSS rules and a keyframes block — no SVG, GIF, icon font or script. Because the animation runs in CSS, the loader spins even before the page's JavaScript has executed, which is usually the exact moment you need a loader.
Why does the prefers-reduced-motion option not switch the animation off completely?
Most people write animation: none, but that freezes the element on its 0% frame. For Ripple that frame has zero width and for Pulse it is scaled down and semi-transparent, so the indicator disappears and users assume the page has hung. Instead of stopping it, this tool multiplies the duration by four: the motion becomes gentle but the indicator stays visible.
Which loader is safest on low-end phones?
Ring, Spokes, Bars and Fading dots animate only transform and opacity, so they stay on the GPU. Ripple deliberately animates width and height because the expanding-circle shape cannot be built otherwise, and that forces a layout pass every frame — use it at small sizes and only once per page.
Can I wire the colours to my own CSS variables?
Yes. The browser colour picker only speaks hex, so the output contains a literal value such as #22d3ee; after copying, swap it for var(--brand). The rgba(...) track can become color-mix(in srgb, var(--brand) 22%, transparent).