About CSS loading spinners
The CSS Loading Spinner Generator creates pure-CSS loaders — no images or libraries. Choose a style (ring, dual ring, bouncing dots or pulse), set the size, colour and speed, preview it live, and copy the HTML and CSS. Lightweight CSS spinners load instantly and scale crisply at any size.
How Loading Spinner works
How to make a loading spinner
- Pick a spinner style.
- Set the size, colour and animation speed.
- Copy the HTML snippet and CSS into your project.
Pure CSS, no images
Each spinner is built from @keyframes animations on small elements, so it is tiny, sharp at any resolution and easy to recolour. There are no extra requests or libraries to load.
Where to use it
Show a spinner while data loads, a form submits, or a page transitions. Hide it once your content is ready.
Common uses
- Show a loading indicator while data fetches
- Add a spinner to form submissions
- Create a page-transition loader
- Build a lightweight loader without images
- Match a loader to your brand colour
- Indicate background processing
- Prototype loading states
- Copy ready-made spinner HTML and CSS
Frequently asked questions
How do I make a CSS loading spinner?
Pick a style, size and colour; the tool gives you the HTML and CSS to copy — it uses pure CSS animation, no images.
Do I need any libraries?
No — the spinners are pure CSS and HTML with no dependencies.
How do I change the speed?
Use the speed slider; it adjusts the animation duration.
Can I recolour it?
Yes — choose any colour, and because it is CSS it stays crisp at any size.
How do I show and hide it?
Add the spinner while loading and remove it (or hide with display:none) when content is ready.
Is anything uploaded?
No — it runs entirely in your browser.
Does it work in all browsers?
Yes — CSS animations are supported everywhere.
Is it free?
Yes — completely free with no sign-up.