What does this tool do?
Loading Spinner Generator builds animated loading indicators in pure HTML and CSS, right in your browser. Pick from ring, dots, bars, or pulse styles, then tune the color, size, speed, and border to get copy-ready code instantly. It is ideal for front-end developers and anyone who wants a lightweight spinner without adding a library.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
Four spinner styles, one-click code
The tool ships with four ready-made animations: the classic Ring with a spinning arc, sequentially bouncing Dots, equalizer-like Bars, and a Pulse that grows and fades. A color picker sets the main color, plus a track color for the Ring, while sliders control size (20-100px), speed (0.2-3s), and border thickness. The live preview updates on every change, and the HTML plus the CSS with its @keyframes wait in a single block ready to copy.
Why pure CSS instead of a library?
Pulling in a whole spinner library for a single loading animation means extra weight and a dependency you must maintain. This tool emits just a few lines of CSS keyframes, with no external request, JavaScript, or web font, so your page loads faster. The generated code is entirely yours: rename the class, embed it inline, or drop it into a design system. Everything runs in the browser, and no data ever leaves your machine.
Frequently asked questions
How do I add the generated spinner to my project?
Paste the HTML snippet from the output where you want the spinner to appear, and paste the CSS block into your stylesheet or a <style> tag. The class names (e.g. spinner-ring) are fixed but you can rename them freely.
How do I adjust the animation speed and size?
The Speed (s) field sets the duration of one full cycle in seconds, so a smaller value spins faster. The Size (px) field sets the spinner diameter, and for the Ring style the Border field controls the ring thickness.
What does the track color option do?
The track color appears only on the Ring style and paints the static background ring, while the colored arc above it uses the main color. That contrast is what makes the rotation visible.
Is Loading Spinner Generator free?
Yes. Loading Spinner Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Loading Spinner Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.