CSS Loader Generator
Create lightweight dependency-free CSS loaders with your own size, color, and speed, preview the motion live, and copy the keyframes. Free, no signup needed.
Free, no signup needed. Runs 100% in your browser.
Loading…
How to use this tool
- Pick a spinner, bounce, dots, or bar style.
- Tune size, color, and speed with the live preview.
- Copy the self-contained CSS.
Frequently asked questions
Does the output need any library?
No. The copied CSS includes its own keyframes class, so it works anywhere you can paste a stylesheet.
What if I prefer reduced motion?
The preview pauses automatically when your system requests reduced motion, and you should gate loaders the same way in your app.
Will a loader confuse screen readers?
Add a text label and an aria-live region around it. A spinning shape alone tells a screen-reader user nothing is happening.
Related tools
Need a website for this?
Describe your idea once and BYOB plans, builds, and deploys your site.
Embed this tool
Paste this snippet to show this tool on your own site.