Générateur de loader CSS (chargement)
Touchez un modèle, réglez couleur, taille et vitesse et copiez le code. Tous n’utilisent que transform et opacity, légers pour le navigateur, et respectent les personnes qui préfèrent moins de mouvement.
Mode d’emploiAnimations de chargement en CSS
Disponible en: 
Générateur de loader CSS (chargement): à quoi ça sert
Choisissez parmi sept modèles d’indicateur de chargement (anneau, double anneau, points, barres, pulsation, barre de progression et carré qui tourne) et réglez la couleur, la taille et la durée. Les animations n’utilisent que transform et opacity.
Le code est fourni avec role=status, un texte masqué pour les lecteurs d’écran et une animation plus lente pour les personnes qui demandent moins de mouvement dans leur système.
Mode d’emploi
- Choisissez le modèle de loader.
- Réglez couleur, taille et durée.
- Copiez le HTML et le CSS.
Quand l’utiliser
- Écrans de chargement de sites et de systèmes.
- Remplacer de lourds GIF de chargement.
Questions fréquentes
Pourquoi utiliser du CSS plutôt qu’un GIF ?
Le loader en CSS ne pèse que quelques octets, reste net sur tous les écrans, change de couleur avec une variable et s’exécute hors du thread principal du navigateur : il reste donc fluide même pendant le chargement de la page.
Le loader est-il accessible ?
Le code inclut role="status" et un texte masqué (Chargement…) pour les lecteurs d’écran. Avec prefers-reduced-motion, l’animation devient nettement plus lente pour les personnes qui demandent moins de mouvement.
Quand afficher un loader ?
Seulement quand l’attente dépasse environ une demi-seconde. Pour des attentes très courtes, un loader qui clignote à l’écran gêne plus qu’il n’aide.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.