CSS Loader Generator (Spinners)

A CSS loader shows that something is happening without a GIF or a JavaScript library: a few lines of HTML and a keyframe animation that the browser runs smoothly on its compositor. This generator writes seven common designs — ring, dual ring, bouncing dots, bars, pulse, ripple and the 12-line segmented spinner — in your color, size, thickness and speed, with an accessible status label and a reduced-motion rule. The preview is an animated SVG drawn from the same CSS.

How to use this tool

1. Pick a loader type.
2. Set the color (and the track color for the ring), size, thickness and the duration of one cycle.
3. Change the class name if "loader" clashes with your own CSS.
4. Copy the HTML where the loader should appear and the CSS into your stylesheet.

Formula

ring: border-top in the color, other borders in the track color, rotate(360deg) every cycle · dots: size ÷ 4 per dot, gap = size ÷ 8, delays −0.32 and −0.16 of a cycle · segments: 12 lines rotated 30° apart, each fading one twelfth of a cycle after the last

Only transform and opacity are animated, which browsers can run without re-laying out the page. Negative delays start each part mid-cycle so the loader looks in motion from the first frame.

Example

The defaults make a 48 px ring with a 6 px #e5e7eb track and a #2563eb arc, turning once per second: border: 6px solid #e5e7eb; border-top-color: #2563eb; animation: loader-ring 1s linear infinite;. Bouncing dots at 48 px use three 12 px dots 6 px apart; at a 1.5 s cycle their delays are −0.48 s and −0.24 s.