CSS Loading Spinner Generator
Build a clean CSS loading spinner visually. Pick a style, size, color, speed and thickness, watch the live animated preview, then copy the full HTML and CSS keyframes code.
Design
Live preview
HTML
CSS
How to use
- Choose a spinner style and adjust size, color, speed and thickness.
- Check the live preview on a light background.
- Copy the HTML into your page and the CSS into your stylesheet. No JavaScript needed.
Note: All animations use plain CSS keyframes, so they run on every modern browser without any library. Thickness applies to ring styles; dots, bars and pulse scale with size and color.
Tips
- Match the spinner color to your brand or to the button that triggered the loading state.
- Keep speed between 0.6 and 1.2 seconds for a calm, professional feel.
- For dark backgrounds, generate the spinner with a light color so it stays visible.
Frequently Asked Questions (FAQ)
How do I use a generated spinner in my site?
Copy the HTML and the CSS, paste the HTML where the spinner should appear, and paste the CSS into your stylesheet. No JavaScript or library is needed.
Can I change the spinner speed and thickness?
Yes; the speed slider sets the animation duration in seconds and the thickness slider sets the ring border width for ring style spinners.
Do the spinners work on mobile browsers?
Yes; they use plain CSS keyframes, which are supported by all modern mobile and desktop browsers.
Which spinner styles can I pick?
Ring, dual ring, dots, bars, and pulse — each with size, speed, colour, and ring-thickness controls and a live preview.