About CSS loaders
This tool generates pure-CSS loading spinners — no images and no JavaScript. Choose a style, then set the size, colour and speed, preview it live and copy the CSS. Add a single element to your page and the animation does the rest. It runs in your browser.
How CSS Loader works
How to use it
- Pick a spinner style.
- Set the size, colour and speed.
- Copy the CSS and add a <div class="loader"></div> where you want it.
How it works
Each loader uses CSS borders or backgrounds plus a keyframe animation to spin or pulse. Because it is pure CSS, it is lightweight and works without scripts.
Common uses
- Add a loading spinner
- Show progress on a button
- Create a page loader
- Indicate background work
- Build a lightweight spinner
- Avoid GIF loaders
- Match a loader to your brand
- Learn CSS animations
Frequently asked questions
How do I add a CSS loader?
Copy the CSS and add an element with the loader class.
Does it use JavaScript?
No — it is pure CSS.
Can I change the speed?
Yes — set the animation duration in seconds.
Can I recolour it?
Yes — pick any colour.
Is my input uploaded?
No — it runs in your browser.
Will it work in all browsers?
Yes — it uses standard CSS animations.
Is it free?
Yes — completely free with no sign-up.