Create lightweight CSS loading spinners for your website — no images, no JavaScript. Pick a style, colour and size, preview it live, then copy the ready-to-use CSS.
How to Use
- Choose a loader style from the dropdown.
- Pick a colour and drag the size slider — the preview updates live.
- Click Copy CSS to grab the code (the HTML snippet is in the comment at the end).
- Paste the CSS into your stylesheet and the HTML where the loader should appear.
Key Features
- Five pure-CSS styles — spinner, bouncing dots, bars, ring and pulse.
- Live preview — colour and size controls update instantly.
- Copy-ready code — CSS plus the matching HTML snippet.
- Zero dependencies — no images, no JavaScript, no libraries.
- 100% private — runs entirely in your browser; nothing is sent or stored.
FAQs
How do I use the loader on my website?
Copy the CSS into your stylesheet, then add the HTML snippet (shown in the comment at the end of the code) wherever the loader should appear.
Do the loaders need JavaScript?
No. Every loader is pure CSS using keyframe animations, so it works as soon as the styles load.
Can I change the animation speed?
Yes — edit the duration in the animation shorthand (e.g. 0.9s) in the copied CSS to make it faster or slower.
Will it work in all browsers?
The loaders use standard CSS keyframes, supported by all modern browsers.
Related Tools
Try these related tools: CSS Gradient Generator, CSS Box Shadow Generator and CSS Pattern Generator.