Loona CSS Loading Spinner Generator — Ring, Arc & Dots (Pure CSS)
Every app needs a loading state, and GIF spinners are heavy and blurry. These three spinners are a few lines of CSS each: weightless, sharp at any size, and recoloured in one value.
How to use the CSS Spinner Generator
- Choose a style: Ring for classic, Arc for modern minimal, Dots for friendly.
- Set size, thickness, colour and speed — the preview runs the real animation.
- Copy the CSS. For the dots style, the HTML snippet is included as a comment in the output.
How it works
Ring and arc spinners rotate a full circle with a keyframes animation; the arc uses a conic-gradient masked into a ring so its tail fades geometrically. Dots use staggered animation delays on one bounce keyframe — the delay, not separate animations, creates the wave.
Worked example
A tools site replaces its GIF loader with the 54 px teal ring from here — the page sheds 180 KB and the spinner matches the brand.
Frequently Asked Questions
Which spinner is most professional?
The ring at moderate speed (0.8–1s) is the corporate standard. Dots feel friendlier; the arc feels most modern.
Will it respect reduced-motion settings?
Add a media query in your CSS: @media (prefers-reduced-motion: reduce) { .loader { animation-duration: 2.4s; } } — slowing, not removing, keeps the meaning.
Can I change speed later?
Yes — one number (the animation duration) in the copied CSS.
Pure CSS — no JavaScript?
Correct. The preview uses the same CSS the tool exports.
More Colour & CSS Generators
The visual Color Palette Generator and the basic Gradient Generator live in Loona Image Tools; this family is the CSS-developer-grade set (multi-stop gradients, exact code output).