Contact

Tools  /  CSS  /  CSS Spinner / Loader Generator

CSS

CSS Spinner / Loader Generator

Ring, dual-ring, dots, bars, pulse or ripple -- a real animated loading indicator, CSS only. Adjustable size, thickness, speed, count and colour, presets, randomize, and export to CSS, Tailwind, SCSS or React.

More CSS tools

Box Shadow Generator Border Radius Generator Glassmorphism Generator CSS Animation Generator CSS Grid Generator CSS Flexbox Generator

What this tool does

Builds a real, animated loading indicator entirely from CSS keyframes — no image, no GIF, no JavaScript-driven canvas — with a live preview showing the actual animation, not a static picture of one frame.

Six spinner types

Ring (a rotating border segment), dual-ring (two colours spinning against each other), dots (a row of bouncing dots with staggered delays), bars (a row of scaling bars, the classic equalizer look), pulse (an expanding, fading circle), and ripple (two staggered expanding rings) — each a distinct real CSS animation technique, not the same rotation applied to different shapes.

Tuning the animation

Size, thickness (for ring/dual-ring/ripple), speed, and colour are adjustable for every type, with dot count and bar count available for the types that use them — letting a spinner match a specific brand colour and pacing rather than using generic defaults.

Presets and randomizing

Six presets — Classic Ring, Dual Ring, Bouncing Dots, Loading Bars, Pulse, and Ripple — cover the common styles, plus a randomize button that picks a type, colours, size, thickness, and speed together for quick exploration.

Getting it out

Export as HTML + CSS ready to drop in directly, a note on using it with Tailwind (since Tailwind has no built-in equivalent for these custom keyframes), SCSS, or a React component with the CSS supplied separately, copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?
No. The spinner is built and animated entirely in the browser -- nothing is sent to a server.
Is this a GIF or image, or real CSS?
Real CSS animation using @keyframes -- no image file, GIF, or JavaScript-driven canvas is involved.
What's the difference between ring and dual-ring?
Ring rotates a single-colour border segment against a faint track. Dual-ring uses two different colours on opposite sides of the border, so the spin reads as two colours chasing each other rather than one segment against a neutral background.
Can I control how many dots or bars are shown?
Yes -- dot count and bar count are adjustable for the Dots and Bars spinner types respectively, each dot or bar getting a staggered animation delay automatically.
Can I use this with Tailwind?
The exported HTML works anywhere, but Tailwind has no built-in utility for these custom @keyframes -- the export includes a note to add the keyframes to your Tailwind config or use them as plain CSS alongside your Tailwind classes.
What export formats are available?
HTML + CSS ready to use directly, a Tailwind-oriented export with a config note, SCSS, or a React component with the CSS supplied separately -- selectable from a dropdown next to the code output.
Theme Accent