Générateur de Loader CSS

Choisissez un style de loader, ajustez la taille, la couleur et la vitesse d'animation, et cet outil génère le CSS complet — y compris la règle @keyframes — plus le balisage HTML correspondant, pour copier une animation de chargement fonctionnelle sans écrire de code d'animation à la main.

En quoi consiste cet outil ?

Un loader CSS est un petit élément animé — un anneau qui tourne, des points qui rebondissent, un cercle qui pulse, ou une barre de progression qui se déplace — utilisé pour montrer qu'un contenu est en cours de chargement, sans boucle d'animation JavaScript ni image ou GIF. Il est construit avec quelques règles CSS et un bloc @keyframes qui définit comment l'élément évolue dans le temps.

Cet outil génère quatre modèles de loader courants avec du CSS réel et fonctionnel : un spinner rotatif basé sur une bordure, trois points qui rebondissent en séquence, un cercle qui pulse, et une barre avec un remplissage glissant. Ajustez taille, couleur et durée sur l'aperçu en direct, puis copiez le CSS généré ainsi que l'élément HTML minimal auquel il s'applique.

Source : CSS Animations Level 1, W3C — la spécification qui définit @keyframes et les propriétés d'animation à partir desquelles ces loaders sont construits.

Pourquoi l'utiliser ?

L'aperçu en direct s'anime en temps réel quand vous changez le style, la taille, la couleur ou la vitesse — vous voyez exactement ce que vous allez livrer.
Génère le CSS complet, y compris le bloc @keyframes, pas juste un extrait à finir vous-même.
Génère aussi le balisage HTML exact attendu par le CSS, sans avoir à deviner les noms de classes ou la structure des éléments.
Quatre modèles d'animation distincts (spinner, points, pulsation, barre) couvrent les cas d'usage les plus courants d'états de chargement.
Animation CSS pure — sans JavaScript, sans fichier image, plus légère et plus fluide qu'un GIF animé.
Fonctionne entièrement dans votre navigateur, gratuit, sans inscription.

Mode d'emploi

Choisissez un style de loader : anneau rotatif, points rebondissants, cercle pulsant ou barre de progression.
Faites glisser le curseur de taille pour agrandir ou réduire le loader.
Choisissez une couleur — elle devient la couleur d'accent du loader (la bordure rotative, les points, ou le remplissage de la barre).
Ajustez la vitesse pour accélérer ou ralentir l'animation ; la plupart des loaders d'interface sont lisibles entre 0,6s et 1,5s par cycle.
Copiez le CSS généré dans votre feuille de style et collez l'extrait HTML là où le loader doit apparaître.

Exemple

Entrée

Style : anneau rotatif · Taille : 40px · Couleur : orange · Vitesse : 1,0s

Résultat

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

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

Un spinner en anneau classique : un cercle avec une bordure quasi transparente sur trois côtés et une couleur pleine sur le quatrième, tournant en continu avec une animation linéaire et infinie.

Pourquoi des loaders CSS plutôt que des GIFs animés

Les spinners GIF animés ont longtemps été le choix par défaut, mais un loader CSS est aujourd'hui presque toujours préférable : c'est quelques centaines d'octets de texte au lieu d'un fichier image binaire, ça s'adapte à n'importe quelle taille sans pixellisation puisque c'est dessiné avec des bordures et des transforms, et sa couleur se change instantanément avec une seule valeur CSS au lieu de réexporter une nouvelle image.

Les quatre styles proposés ici — spinner, points, pulsation, barre — sont aussi ceux qu'on retrouve le plus souvent dans les interfaces réelles, des états de chargement de bouton aux overlays pleine page. Chacun n'anime que transform et opacity dans ses keyframes, ce que les navigateurs peuvent animer en douceur sur le GPU sans ralentir le reste de la page.

Choisir le style selon la situation

Anneau rotatif : le choix le plus neutre et polyvalent — fonctionne bien dans les boutons et les petits états de chargement en ligne.
Points rebondissants : donne une impression plus légère et ludique ; courant pour les indicateurs de « en train d'écrire... » ou les attentes courtes.
Cercle pulsant : adapté à un indicateur de chargement à élément unique ou comme point de statut « actif/en direct ».
Barre de progression : suggère une avancée et est souvent attendue pour les chargements de page ou les processus en plusieurs étapes, même sans pourcentage exact.

Utiliser le loader dans votre projet

Collez le CSS généré une seule fois dans votre feuille de style, puis réutilisez l'extrait HTML partout où vous avez besoin d'un état de chargement — dans un bouton pendant l'envoi d'un formulaire, sur une carte pendant le chargement de données, ou centré dans un overlay pleine page. L'animation étant du CSS pur, l'activer ou la désactiver revient simplement à ajouter ou retirer l'élément du DOM, ou à le masquer avec display: none.

→ Générateur de Box Shadow · Minificateur CSS

Foire aux questions

Ces loaders fonctionnent-ils sans JavaScript ?

Oui — chaque loader ici est animé uniquement avec les @keyframes CSS et la propriété animation. JavaScript n'est nécessaire que si vous voulez afficher ou masquer le loader selon un événement, comme l'envoi d'un formulaire ou la fin d'une requête.

Pourquoi le CSS généré inclut-il un bloc @keyframes ?

Les animations CSS nécessitent deux parties : les styles de base de l'élément (taille, couleur, forme) et une règle @keyframes décrivant comment ces styles changent pendant la durée de l'animation. Les deux sont nécessaires pour que l'animation fonctionne, donc cet outil génère toujours la paire complète plutôt qu'un simple style de base.

Puis-je utiliser plusieurs styles de loader sur la même page ?

Oui. Chaque style génère ses propres classes CSS et keyframes au nom unique (par exemple css-loader-spinner et css-loader-dots), donc vous pouvez copier plusieurs styles dans la même feuille de style sans conflit.

L'animation du loader va-t-elle ralentir ma page ?

Non — les quatre styles n'animent que transform et opacity, que les navigateurs peuvent gérer sur le compositeur/GPU sans déclencher de recalcul de mise en page. Ils restent donc fluides même sur des appareils moins puissants, contrairement à l'animation directe de propriétés comme width ou top.

Comment changer la couleur du loader plus tard sans tout régénérer ?

Ouvrez le CSS copié et modifiez la valeur de couleur directement — elle apparaît une seule fois (comme border-top-color, background ou similaire selon le style) plutôt que dupliquée dans toute la règle, donc un simple rechercher-remplacer la met à jour partout.