CSS Loader Generator
Pure-CSS spinners with adjustable speed, size, and colour.
<div class="loader"></div>
<style>
.loader {
width: 48px;
height: 48px;
border: 4px solid #635BFF33;
border-top-color: #635BFF;
border-radius: 50%;
animation: spin 1.2s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>What is a CSS Loader / Spinner Generator?
A CSS loader (or spinner) is an animated visual cue that a web page uses to tell the user something is happening — a form is submitting, data is fetching, an image is decoding. A CSS spinner generator gives you a gallery of ready-made spinners and lets you customise colour, size, and animation speed, then copy a clean CSS + HTML snippet to drop into your project. Pure CSS spinners have three advantages over GIFs or SVGs: they scale infinitely without pixelation, they can be recoloured with a single CSS variable, and they don't trigger an extra network request.
Which spinner to use. Ring is the universal default — a simple spinning arc that reads as "loading" across every culture. Dual ring (dashed line) adds a bit of energy. Bouncing dots and equaliser bars feel playful — common in chat apps and voice-recording UIs. Pulse is quiet; useful for subtle "syncing in background" indicators that shouldn't distract. Orbit and rotating cube are more decorative — suited to empty states and onboarding screens where the visual accent matters.
Accessibility. Every spinner here is purely decorative — screen readers should not announce it. Wrap the spinner with role="status" and aria-label="Loading…" on the parent container that holds the spinner and any supporting text. For users who prefer reduced motion (prefers-reduced-motion: reduce), consider falling back to a static skeleton or text message — the CSS generated here respects your page's media-query overrides if you add them.
Animation duration affects perceived urgency. Faster (0.5–0.9s per cycle) feels urgent and active, right for interactions the user is directly waiting on. Slower (1.5–2.5s) feels calm, right for background processes. Anything below 0.4s starts looking frantic and above 3s looks stuck. Our slider covers the useful range.
Performance. All these spinners use CSS transform and opacity animations, which are GPU-accelerated by the browser's compositor. They run at 60fps on the lowest-end hardware and don't force re-layout. They are measurably cheaper than any JavaScript-driven spinner or GIF loader.
How to generate a CSS loader
- Pick a loader from the gallery.
- Set colour, size, and speed to match your design.
- Copy the combined HTML + CSS snippet.
- Wrap with an accessible status region —
role="status" aria-label="Loading".
Features
- Nine curated loaders covering every common need.
- Customise colour, size, and cycle duration.
- Pure CSS output — no JavaScript dependencies.
- GPU-accelerated for 60fps on low-end hardware.
- Copy-ready HTML + CSS snippet.
Frequently asked questions
- Are CSS spinners better than GIFs?
- Yes. Pure CSS spinners scale without pixelation, recolour with a single property, skip an extra HTTP request, and are GPU-accelerated to 60fps. GIFs are larger, lower-quality, and can't be restyled.
- How fast should my spinner spin?
- 0.8–1.2s per cycle is the sweet spot for most UI. Faster feels frantic, slower feels stuck. Adjust with the speed slider.
- Should I show a spinner for every loading state?
- No — use skeleton screens for content-heavy loads (lists, pages) because they communicate layout ahead of content. Use spinners for quick interactions (< 2s) where skeletons would flash distractingly.
- Does the spinner respect reduced-motion?
- Not out of the box. Add a @media (prefers-reduced-motion: reduce) rule that sets animation-duration: 0s or replaces the spinner with a static message. Our global CSS already disables animations under this media query site-wide.
- Can I layer multiple spinners?
- Yes, but consider if you need to. Layering reads as 'something is really broken'. Prefer a single spinner with supporting text.