Generez des loaders et spinners CSS animes sans image : choisissez le type, la couleur, la taille et la vitesse, copiez le HTML et le CSS prets a l'emploi.
Générateur de loaders & spinners CSS
🎨 Personnalisation
aria-label="Chargement…" et role="status" au conteneur pour l'accessibilité.
👁️ Aperçu
HTML
CSS
Loaders CSS : des indicateurs de chargement sans une seule image
Un loader (ou spinner) signale à l'utilisateur qu'une action est en cours : chargement de page, requête réseau, traitement de formulaire. Pendant longtemps on utilisait des GIF animés — lourds, flous en haute résolution et impossibles à recolorer. Aujourd'hui, le CSS pur permet de créer des animations de chargement nettes, légères et entièrement paramétrables, accélérées par le GPU. Ce générateur produit pour vous le HTML et le CSS de huit styles de loaders, personnalisables en couleur, taille et vitesse, prêts à coller dans n'importe quel projet web, Angular, React ou statique.
Le principe : @keyframes et la propriété animation
Toute animation CSS repose sur deux éléments : une règle @keyframes qui décrit les étapes de l'animation, et la propriété animation appliquée à l'élément. Pour un spinner, la magie tient en une rotation continue de 360°.
.loader {
width: 48px; height: 48px;
border: 5px solid #e9ecef; /* anneau de fond */
border-top-color: #7c3aed; /* segment coloré */
border-radius: 50%;
animation: spin 1s linear infinite; /* rotation continue */
}
@keyframes spin {
to { transform: rotate(360deg); }
}Huit styles, un même principe
Chaque type de loader applique cette mécanique différemment :
- Anneau et double anneau — rotation d'une bordure partielle ;
- Points rebondissants et roue à 8 points — opacité ou translation décalée par
animation-delay; - Barres égaliseur — variation de
scaleYen cascade ; - Pulse et ripple — un cercle qui grandit en s'estompant ;
- Points de suspension — l'effet « … » des messageries.
animation-delay croissant à plusieurs éléments identiques, on obtient une vague visuelle harmonieuse à partir d'une seule keyframe.
Performances : animez transform et opacity
Pour une animation fluide à 60 images/seconde, n'animez que transform (rotation, échelle, translation) et opacity. Ces deux propriétés sont gérées par le compositeur graphique (GPU) sans déclencher de reflow ni de repaint coûteux. Évitez d'animer width, height, top ou margin : ils forcent le navigateur à recalculer la mise en page à chaque frame.
transform et opacity — ils restent fluides même sur mobile.
Accessibilité et bonnes pratiques
Un loader est avant tout une information pour l'utilisateur : il doit donc être perceptible par les lecteurs d'écran. Ajoutez role="status" et un aria-label explicite à votre conteneur. Pensez aussi aux personnes sensibles au mouvement en respectant prefers-reduced-motion.
<div class="loader" role="status" aria-label="Chargement en cours"></div>
@media (prefers-reduced-motion: reduce) {
.loader { animation-duration: 2s; } /* ralentir plutôt que supprimer */
}FAQ — Loaders et spinners CSS
border-top-color ou background). Vous pouvez aussi utiliser currentColor dans votre CSS pour que le loader hérite automatiquement de la couleur du texte parent.
.component.css Angular, CSS Module ou styled-component React) et le balisage dans le template. Affichez-le conditionnellement via *ngIf ou un état React pendant le chargement.
display:flex; align-items:center; justify-content:center; occupant la hauteur voulue (par exemple min-height:100vh pour le plein écran). C'est la méthode la plus simple et robuste.
Conclusion
Les loaders CSS remplacent avantageusement les vieux GIF : plus légers, plus nets, recolorables et accélérés par le GPU. Avec une simple règle @keyframes et la propriété animation, on obtient des indicateurs de chargement professionnels en quelques lignes. Ce générateur vous épargne l'écriture manuelle : choisissez un style, ajustez couleur, taille et vitesse, visualisez le rendu en direct, puis copiez le HTML et le CSS. N'oubliez pas d'ajouter role="status" et un aria-label pour rester accessible, et limitez-vous à animer transform et opacity pour une fluidité parfaite.
