Six flexible styles
Choose a ring, orbit, dual spinner, bouncing dots, equalizer bars or expanding ripple.
Free CSS developer tool
Loading Spinner Generator Online
Design a polished CSS loader without trial and error. Pick a motion, tune every detail, test it on different backgrounds, and copy clean, accessible code.
Live playground
Build your loader
CSS only
Loading content
Ready-to-use codeHTML + CSS, no library required
Built for real interfaces
A better loading state in a few clicks
From a compact button loader to a full-page progress indicator, start with a proven animation and make it fit your product.
Instant visual control
Tune color, size, weight, speed and direction while the live preview keeps moving.
Clean, accessible output
Copy semantic status markup, a useful label and optional reduced-motion support.
Three simple steps
How to make a CSS loading spinner online
The generator handles the repetitive CSS so you can focus on where and when the loader appears.
- 1Choose a spinner style
Pick the motion that best fits your interface and the expected wait.
- 2Customize and preview
Adjust the loader’s colors, dimensions, speed and direction on three backgrounds.
- 3Copy the HTML and CSS
Paste the generated code into your project, then show or hide it with your app logic.
Small details, calmer waits
Loading spinner best practices
Use it for unknown progress
A spinner works best when the duration is short and the exact percentage is not available.
Keep the motion steady
A loop around 700–1,200 milliseconds usually feels active without becoming frantic.
Explain the wait
Pair longer waits with concise text such as “Saving changes” or “Preparing your file.”
Respect reduced motion
Pause or simplify nonessential movement when the device requests less animation.
Quick answers
Loading spinner generator FAQ
How do I make a loading spinner in CSS?
Select a spinner preset above, adjust its color, size, thickness and speed, then copy the generated HTML and CSS. The animation works without an image or third-party library.
Is this loading spinner generator online and free?
Yes. The generator is free, works online with no sign-up and creates everything locally in your browser.
Do I need JavaScript for a loading spinner?
No. The spinner itself uses HTML and CSS only. You can use your application’s JavaScript to show the loader when work begins and remove it when the result is ready.
What is the best loading spinner speed?
About 700 to 1,200 milliseconds per loop works well for most circular spinners. Slower, softer motion can feel better for ripples and larger full-page loaders.
How can I make a loading animation accessible?
Use a status role and a descriptive label, hide the decorative shapes from screen readers, and include a reduced-motion fallback. The code created here supports all three.
Keep creating
Try other frontend design tools
Build the rest of your interface with these free online generators.