Are CSS-only loaders better than SVG or GIF spinners?

For most use cases, yes. CSS loaders ship as a few lines of stylesheet rather than a binary asset, which means no extra HTTP request and no decoding cost. They scale crisp at any DPI (no pixelation like a GIF). They also let you change color, size, and speed at runtime with CSS variables — try doing that with a baked-in GIF. The trade-off is that complex multi-shape animations are still easier in Lottie or SVG. For loaders that fit in 64×64 pixels, CSS wins.

Will my CSS loader run smoothly during heavy JavaScript work?

Mostly. Animations that only mutate transform and opacity (which is what every loader in this generator does) run on the compositor thread, so they keep ticking even when the main thread is busy. The exception is when the browser is paint-thrashing — heavy scroll handlers or large reflows can still cause frame drops. If you see your loader stuttering, the fix is almost always to move work off the main thread (Web Workers, requestIdleCallback, or just not blocking the page during fetches).

How do I make the loader accessible?

Three things: add role='status' to the loader element so assistive tech announces it as a live region. Add aria-label='Loading' (or a more specific message) so screen readers say something instead of just announcing the role. And respect prefers-reduced-motion — wrap your @keyframes in a media query that drops the animation for users who've turned motion off in their OS settings (a static dot or text 'Loading…' is the typical fallback).

When should I show a spinner versus a skeleton screen?

Rule of thumb: under 1 second, no indicator (it'll just flash). 1–3 seconds, a spinner is fine. Over 3 seconds, switch to a skeleton or a progress bar — research from Nielsen Norman Group shows perceived wait time drops 30–50% when users can see content shape forming. Spinners are best for unbounded waits where you don't know what's coming back (form submission, login). Skeletons are best for predictable layouts (article list, profile page) where you can preview the structure.

Why does my loader look different in Safari?

Two common culprits: first, Safari's CSS animation engine can subpixel-render slightly differently from Chromium for sub-pixel transforms — adding transform: translateZ(0) on the spinning element forces a compositor layer and stabilizes it. Second, Safari respects the system 'Reduce Motion' setting more aggressively than other browsers, so what looks like a broken loader might just be a user setting. Test both in 'Develop > Disable Reduce Motion' and on a real device.

Générateur de loaders CSS

Créez des loaders et spinners CSS animés sans une seule ligne de JavaScript. Six styles, couleur, taille et vitesse personnalisables — copiez le HTML + CSS directement dans votre projet.

Style de loader

Couleur

Couleur de la piste

Taille: 64px

Vitesse (un cycle): 1.0s

Épaisseur du trait: 6px

Aperçu en direct

HTML + CSS

<!-- HTML -->
<div class="loader" role="status" aria-label="Loading"></div>

<!-- CSS -->
.loader {
  width: 64px;
  height: 64px;
  border: 6px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: loader-spin 1s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

Chaque loader ici est en pur CSS — pas de GIF, pas de SVG, pas de librairie d'animation JS. Les keyframes ne touchent qu'à transform et opacity, donc elles passent par le GPU et restent fluides même sur une page chargée. Ajoutez role='status' et aria-label pour que les lecteurs d'écran annoncent l'état de chargement.

Comment utiliser

Créez des loaders et spinners CSS animés sans une seule ligne de JavaScript. Six styles, couleur, taille et vitesse personnalisables — copiez le HTML + CSS directement dans votre projet.

1Pick a loader style. Spinner is the safe default; pulse and dots are friendlier; ripple draws attention if you want to interrupt.
2Set your brand color. The default indigo is a placeholder — match the loader to a primary CTA color so it reads as part of your UI rather than a stock widget.
3Adjust size for context. 32–48px works inside buttons, 64–80px for inline page loaders, 100px+ only when the loader is the page (full-screen splash).
4Tune speed. Under 0.6s feels frantic; 0.8–1.2s is the sweet spot; over 1.5s starts to feel like the page is broken. Faster ≠ better.
5Click Copy. The output bundles the HTML markup and the CSS — paste into your stylesheet and drop the <div class='loader'> wherever you need it.

Fonctionnalités

Six distinct loader styles — spinner, dual-ring, dots, bars, pulse, ripple — covering every common UI need
Live preview that updates as you change color, size, speed, and stroke thickness
Outputs ready-to-paste HTML + CSS — no JS, no SVG, no GIF, no external library
GPU-friendly keyframes (transform/opacity only) so the animation stays smooth on busy pages
Built-in role='status' and aria-label so the loader is accessible to screen readers out of the box

Questions fréquentes

En savoir plus

CSS Loaders Without JavaScript — Six Pure-CSS Spinners and When to Reach for Each