How Do I Make a Pure-CSS Loading Spinner?
Updated 2026-06-27
To make a pure-CSS loading spinner, pick a spinner style, set its size, color and speed, and copy the generated HTML plus CSS into your project. The CSS Loader & Spinner Generator does exactly this in your browser, producing a self-contained snippet that animates with CSS keyframes alone, no JavaScript and no image file required.
Why pure CSS instead of a GIF or a library
A loading indicator should be the lightest thing on the page, since it shows precisely when the page is busy. Pure CSS wins on every front:
- No extra requests — there is no GIF, SVG or script to download, so the spinner appears instantly.
- Crisp at any size — CSS shapes scale without blurring, unlike a fixed-resolution image.
- Easy to recolor — one hex value restyles the whole animation.
- No dependency — you are not pulling in a JavaScript library just to spin a circle.
Choosing and tuning a style
The generator offers eight styles, so you can match the motion to your brand: Ring and Dual ring for classic spinners, Dots and Bars for a typing-style pulse, Pulse and Ripple for expanding circles, Spinner for the twelve-blade fade, and Square flip for a 3D flip. After picking a chip, dial in three things:
- Size from 16 to 96px, so the spinner fits a button, an inline label or a full-page overlay.
- Speed from 0.4 to 2 seconds per full cycle. Slower reads as calm; faster reads as urgent.
- Color via the picker or a hex value like #5b8def. Both #rgb and #rrggbb formats work, and an invalid value is flagged before you copy.
The live preview animates at your exact settings on a checkerboard background, which makes it easy to judge contrast against light and dark surfaces at once.
Pasting the snippet into your project
When the preview looks right, click Copy snippet. You get two parts: a small HTML element and a CSS block. Drop the markup where the spinner should appear and put the CSS in your stylesheet or a style tag. The class and keyframe names are namespaced with an ld- prefix, so the snippet is self-contained and will not collide with your existing styles, or even with a second loader pasted onto the same page. Because the animation is plain CSS keyframes, it runs the moment the element is in the DOM, with nothing to initialize.
Fine-tuning the motion curve
The styles ship with sensible easing, but if you want a custom acceleration, define your own easing curve and swap it into the animation shorthand. The Cubic Bezier Generator lets you draw a timing function and copy the matching CSS value, which you can paste in place of the easing keyword in the loader's animation rule for a unique feel.
A note on privacy
Everything here happens locally in your browser. Your style, color and slider choices are remembered on your device between visits, and nothing about your design is uploaded to a server. You can build, preview and copy a production-ready spinner entirely offline. When you need another one, head back to the CSS Loader & Spinner Generator, tweak the settings and copy a fresh snippet in seconds.