Générateur d’indicateurs de chargement CSS

Par Bogdan Sandu (EN) · Publié 9 juin 2025 · Dernière mise à jour 14 septembre 2026

Ce générateur d’indicateurs de chargement CSS écrit le CSS d’une animation de chargement pour vous éviter de coder les images clés à la main. Choisissez un indicateur, ajustez trois réglages et copiez le résultat. Chaque indicateur utilise uniquement du CSS : aucun JavaScript, aucune image et aucune dépendance.

Ce que vous pouvez définir :

• Type de chargeur : Spinner, Dots, Pulse, Wave, Ring, Grid, Heart, Progress Bar, Shuriken, Bar Wave, Hypnotic ou Flipping Square
• Taille de 20px à 100px
• Couleur à partir d'un sélecteur de couleur, appliquée à la partie mobile du chargeur
• Vitesse de 0.5x à 2x, ce qui divise la durée de l'animation

L'aperçu se met à jour à mesure que vous faites glisser les curseurs et le panneau de code se réécrit en même temps. Chaque chargeur anime transform ou opacity, à l'exception de la barre de progression, qui anime background-position.

Comment utiliser ce générateur d’indicateurs de chargement CSS

1. Choisissez un type de chargeur dans la liste déroulante et regardez l'aperçu.
2. Définir la taille et choisir une couleur. La couleur va sur la bordure tournante, les points, les barres, ou le remplissage, selon le chargeur.
3. Faites glisser le curseur de vitesse. Les valeurs supérieures à 1x raccourcissent la boucle, les valeurs inférieures à 1x la prolongent.
4. Cliquez sur Copier et collez le CSS dans votre feuille de style.
5. Ajoutez un élément avec la classe correspondante où le chargeur doit apparaître. Le nom de la classe est custom_loader_ suivi du type.

Le HTML pour onze des douze chargeurs est un seul élément vide :

<div class="custom_loader_spinner" role="status" aria-label="Loading"></div>

Bar Wave est l'exception. Son CSS cible cinq éléments enfants, il a donc besoin de ce balisage :

<div class="custom_loader_bar-wave" role="status" aria-label="Loading">
  <div></div><div></div><div></div><div></div><div></div>
</div>

Avec les paramètres par défaut, le Spinner produit ce CSS :

.custom_loader_spinner {
  width: 40px;
  height: 40px;
  position: relative;
}

.custom_loader_spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: custom_spin 1s infinite linear;
}

@keyframes custom_spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Les deux blocs partagent un sélecteur à dessein. Le premier définit la boîte, le second définit l'apparence, et vous pouvez les fusionner une fois que le code est dans votre projet.

Ce que l'outil ne fait pas

• Il ne copie que le CSS. Le code HTML ci-dessus n'est pas dans le panneau de code, donc gardez cette page ouverte ou notez le nom de la classe.
• La couleur de la piste du Spinner et de l'Anneau, et le gris clair de la barre de progression, sont fixés à #f3f3f3. Changez-les à la main pour des arrière-plans sombres.
• Il n'y a pas de sortie SCSS ou Tailwind, et pas d'exportation GIF ou SVG.
• Il n'ajoute aucun attribut d'accessibilité et aucune règle de mobilité réduite. Ajoutez role="status" comme indiqué ci-dessus, et une requête média comme celle-ci :

@media (prefers-reduced-motion: reduce) {
  .custom_loader_spinner {
    animation-duration: 3s;
  }
}

Le ralentissement de la boucle maintient le signal « toujours en charge » tout en supprimant la plupart du mouvement. La requête prefers-reduced-motion (EN) est prise en charge dans tous les navigateurs actuels.

Qu'est-ce qu'un générateur d’indicateurs de chargement CSS ?

Un générateur d’indicateurs de chargement CSS est un outil basé sur un navigateur qui produit du code d'animation CSS prêt à l'emploi pour charger des indicateurs, sans aucune image clé manuscrite.

La sortie est purement CSS (EN), pas un fichier vidéo ou une séquence d'images, il n'y a donc rien à restituer sur un serveur ou à charger en tant qu'élément distinct.

La plupart des outils fonctionnent de la même manière en dessous. Vous choisissez un style, faites glisser quelques curseurs, et un aperçu en direct se met à jour en temps réel pendant que le panneau sur le côté écrit le code réel.

• Ce qu'il remplace : l'écriture manuelle des blocs @keyframes et le calcul des angles de rotation ou des étapes d'opacité à la main
• Ce que ce n'est pas : une bibliothèque d'animation JavaScript, un framework d'interface utilisateur complet, ou un lecteur vidéo

Souvent, les gens en essaient un d’abord, ajustent les valeurs, puis copient l’extrait final directement dans un projet.

Quels types d'animations de chargement CSS pouvez-vous générer ?

La plupart des générateurs trient leur sortie en six familles reconnaissables : spinners, points, barres, impulsion, anneau et squelette.

Les animations comptent parmi les fonctionnalités CSS les plus utilisées. Les chargeurs sont l'un des premiers endroits où la plupart des développeurs les recherchent, car un spinner est une petite animation autonome avec un travail évident.

L'application mobile de Facebook a aidé à faire entrer les skeleton screens (EN) dans le grand public. Il a remplacé l'espace blanc vide dans le flux d'actualités par des contours gris en forme de contenu en dessous.

Les spinners restent le choix par défaut pour la plupart des sites. Un rapide coup d'œil à n'importe quelle collection de spinners CSS (EN) montre à quel point la variété ressort d'une même poignée de formes rotatives. Les douze chargeurs sur cette page couvrent les familles spinner, dots, bar, pulse et ring. Les écrans squelettes sont un modèle différent, lié à votre mise en page, donc aucun générateur ne peut les produire de manière générique.

Rendu CSS uniquement, SVG et hybride : comment les générateurs de chargeurs CSS créent des animations

Trois chemins de rendu différents se trouvent derrière cet aperçu en direct, et la plupart des générateurs ne vous disent jamais lequel vous obtenez. Celui-ci est CSS seulement.

La méthode CSS-only dessine une forme avec border-radius ou box-shadow et la déplace en utilisant la transformation et l'opacité. Il est construit sur la même mécanique @keyframes (EN) qui alimente toutes les autres animations CSS.

La méthode basée sur SVG dessine d'abord la forme comme un chemin vectoriel, puis applique le mouvement via des décalages de tableau de traits ou des transformations CSS simples. C'est ce que les gens veulent dire quand ils parlent d'animer une forme SVG (EN) au lieu d'une div.

Le rendu hybride apparaît quand un générateur veut une forme complexe (une marque de logo, une icône) mais veut toujours que le mouvement soit contrôlé par de simples variables CSS. Cela évite la syntaxe d'animation propre à SVG.

Prise en charge du navigateur pour les animations CSS Loader

Le support des navigateurs a cessé d’être un véritable obstacle pour ce type d’animation il y a des années.

Les animations CSS sont livrées sans préfixe dans Internet Explorer depuis la version 10, Firefox depuis la version 16, Safari depuis la version 9, et Chrome depuis la version 43, selon caniuse.com (EN). Les versions antérieures nécessitaient un préfixe de fournisseur.

Les générateurs construits aujourd'hui produisent rarement du code préfixé par le fournisseur. L'audience qui utilise toujours un navigateur qui en a besoin est maintenant une erreur d'arrondissement, et cet outil omet également les préfixes.

Quels contrôles de personnalisation les générateurs de chargeur CSS offrent-ils ?

Chaque générateur expose une poignée des mêmes cadrans de base, même lorsque l'interface est complètement différente d'un outil à l'autre. Celui-ci a la taille, la couleur et la vitesse.

Taille : un pixel ou une valeur rem, parfois verrouillée à une plage minimale et maximale.

Couleur : généralement un sélecteur hexadécimal, parfois avec une entrée RGB ou HSL côte à côte.

Largeur du trait : contrôle l'épaisseur de l'anneau ou de la barre, plus pertinente pour les styles basés sur SVG.

Speed : correspond directement à la durée de l'animation, typiquement entre 0,6s et 2s.

Element count : combien de points, de barres ou de segments composent le chargeur.

Les contrôles de taille fonctionnent de plus en plus sur clamp(), permettant au chargeur d'évoluer entre un sol et un plafond au lieu de forcer une valeur distincte pour le mobile. Un calculateur de valeur de serrage simplifie la sélection de ces deux points de terminaison. Le générateur ci-dessus génère des valeurs de pixels fixes, alors échangez-les contre un clamp() si vous en avez besoin.

Les champs de couleur attendent généralement un code hexadécimal. Basculer entre les formats signifie convertir cette valeur hexadécimale en RGB chaque fois qu'un système de conception remet des jetons de couleur dans l'autre format.

La plupart des générateurs limitent la taille quelque part entre 16px et 200px et refusent tout ce qui est en dehors de cette bande, principalement pour empêcher l'aperçu de casser la mise en page. Ici la plage est de 20px à 100px.

Quels formats de sortie les générateurs de chargeur CSS fournissent-ils ?

Trois formats de sortie couvrent presque tous les générateurs du marché : CSS brut, SCSS et un extrait combiné CSS-plus-HTML. Cet outil produit du CSS brut, avec le balisage documenté ci-dessus.

Bootstrap et Tailwind livrent leurs propres sources sous forme de Sass ou d'une étape de construction plutôt que d'une seule feuille de style plate. C’est exactement la raison pour laquelle les équipes déjà au sein de l’un de ces systèmes ont tendance à utiliser l’exportation SCSS au lieu du CSS brut.

Quel que soit le format, le code de production passe généralement par un minifier CSS (EN) avant d'être envoyé, en éliminant les espaces blancs et les commentaires laissés par le générateur.

Aller dans l'autre sens, coller le code exporté dans un CSS beautifier (EN) le rend plus facile à lire lorsque vous décidez ce qu'il faut garder et ce qu'il faut couper.

Les noms de classes générés ont tendance à être courts et génériques (spinner, loader-ring), de sorte que la plupart des gens les renomment avant que le code n'atteigne un projet réel. Il est peu probable que le préfixe custom_loader_ utilisé ici entre en collision, mais renommez-le si votre base de code a une convention de dénomination.

Quels outils de génération de chargeur CSS vaut-il la peine d'utiliser ?

Une poignée de noms reviennent encore et encore une fois que vous commencez à comparer les options : Loading.io (EN), SpinKit (EN), Load Awesome (EN) et les spinners intégrés dans Bootstrap (EN) et Tailwind (EN).

Outils générateurs dédiés :

• Avantages : contrôle précis, aperçu en direct, aucune dépendance au framework
• Inconvénients : une autre dépendance externe à suivre, les styles peuvent entrer en conflit avec les conventions de nommage existantes

Framework built-ins :

• Avantages : zéro configuration supplémentaire si le framework est déjà dans le projet, cohérent avec le reste de l'interface utilisateur
• Inconvénients : moins de styles d'animation à choisir, la personnalisation est limitée par les variables du framework

Le README de SpinKit (EN) indique qu'il utilise des animations de transformation et d'opacité accélérées par matériel, distribuées comme un simple paquet npm sans aucune étape de compilation requise.

Ce détail compte plus qu’il n’y paraît. L'utilitaire spinner (EN) intégré à Tailwind suit la même restriction, en s'en tenant aux propriétés que les navigateurs savent déjà animer efficacement.

Comment les chargeurs CSS affectent-ils les performances des pages ?

Le travail d'un chargeur consiste à faciliter l'attente, donc celui qui bégaie ou déplace la page va à l'encontre de son propre objectif.

Les navigateurs modernes ne peuvent animer que deux propriétés CSS à moindre coût : la transformation et l'opacité. Toute autre action, comme l'animation de la largeur ou du haut, force le navigateur à revenir à la mise en page et à peindre sur chaque image.

• 60 FPS est la fréquence d'images cible des navigateurs pour que l'animation soit fluide, selon web.dev (EN)
• Chaque image reçoit un budget de 16,7 millisecondes avant que les utilisateurs ne commencent à percevoir un décalage
• La transformation et l'opacité sont les propriétés que le compositeur peut animer (EN) sans déclencher la mise en page ou la peinture
• 81% des pages mobiles ont atteint un bon score de changement de mise en page cumulatif en 2025, selon le HTTP Archive Web Almanac (EN)

Les chargeurs qui réservent leur propre espace fixe (une largeur et une hauteur définies sur l'élément wrapper) ne contribuent pas du tout à ce numéro de décalage de disposition. Ceux construits sans espace réservé sont généralement ceux qui le font. Chaque chargeur définit ici une largeur et une hauteur explicites.

Les écrans de squelette portent un petit coût supplémentaire que la plupart des spinners ne font pas. Répéter des animations de dégradé ou de scintillement sur une grille entière de cartes signifie animer plus d'éléments à la fois. Cela s'ajoute sur les téléphones bas de gamme, même lorsque chaque animation individuelle est bon marché.

Les chargeurs CSS répondent-ils aux normes d'accessibilité ?

La plupart des chargeurs générés échouent par défaut en matière d'accessibilité, non pas parce que l'animation elle-même est le problème.

La pièce manquante est presque toujours le balisage. Un div pivotant sans rôle ni étiquette ne dit rien au lecteur d'écran sur ce qui se passe sur la page.

Les attributs ARIA (EN) qui comptent ici sont documentés en détail. MDN répertorie la propriété de réflexion ariaBusy (EN) comme Baseline largement disponible, et le rôle status (EN) est le bon wrapper pour un indicateur de chargement.

Le mouvement lui-même est une préoccupation distincte du balisage. Les directives d'accessibilité du contenu Web du W3C incluent le Critère de réussite 2.3.3, Animation à partir d'interactions (EN). Il s'agit d'une règle de niveau AAA exigeant que le mouvement déclenché par l'interaction de l'utilisateur puisse être désactivé, sauf s'il est essentiel au contenu.

Cette règle existe parce que le mouvement a un coût physique réel pour une tranche significative d’utilisateurs. La recherche utilisant les données de l'enquête nationale sur la santé et la nutrition (EN), publiée dans les Archives of Internal Medicine, a mis le dysfonctionnement vestibulaire à 35,4% des adultes américains âgés de 40 ans et plus.

Respecter la requête multimédia prefers-reduced-motion est la solution pratique. Remplacez une animation tournante ou rebondissante par un simple fondu d'opacité, ou ralentissez-la complètement, lorsque cette préférence est définie. Ne retirez pas entièrement le chargeur.

X (anciennement Twitter) expose déjà une option de réduction du mouvement dans ses propres paramètres d'accessibilité, indépendamment des paramètres du système d'exploitation. C’est le même principe appliqué au niveau du produit.

Les chargeurs basés sur SVG ont besoin d'une chose de plus que les simples chargeurs CSS. Sans un attribut aria-hidden ou une alternative textuelle, un SVG décoratif peut finir par être lu à haute voix comme une chaîne sans sens de données de chemin. Le guide des fichiers SVG accessibles (EN) couvre la correction.

Comment mettre en œuvre un indicateur de chargement CSS généré sur un site Web ?

Obtenir un indicateur de chargement généré à partir du panneau d'exportation vers une page active suit le même ordre, quel que soit l'outil qui a produit le code.

1. Copiez le bloc CSS dans votre feuille de style ou une balise de style avec portée
2. Collez le balisage HTML correspondant là où le chargeur doit apparaître
3. Ajoutez l'enveloppe d'accessibilité (rôle, aria-live, aria-busy) autour d'elle
4. Masquer le chargeur par défaut avec display :none ou visibility :hidden
5. Activez-le juste avant le début d'une requête et désactivez-le une fois qu'une réponse arrive

Cette étape de basculement est généralement liée à un appel fetch ou à une requête Ajax (EN). Un chargeur sans rien à attendre n'a aucune raison d'exister.

Intégrer un indicateur de chargement CSS dans des projets React ou Vue

react-loader-spinner (EN) a enregistré à lui seul environ 289 000 téléchargements hebdomadaires sur le registre npm en septembre 2026. Cela en dit long sur la fréquence à laquelle les équipes recherchent un composant packagé au lieu de copier le balisage brut à la main.

Approche avec React :

• Enveloppez le balisage du chargeur dans un petit composant qui accepte un booléen de chargement comme accessoire
• Rendez-le conditionnellement avec le même booléen, ou utilisez une bibliothèque comme CircularProgress (EN) de MUI
• Conduire la visibilité de l'état défini à l'intérieur d'un useEffect autour de l'appel fetch

Approche avec Vue :

• Lier la visibilité de l'enveloppe avec v-if ou v-show contre une référence réactive
• Mettre cette référence à true avant un appel asynchrone et à false dans le bloc finally

Aucun des deux frameworks n'a besoin de JavaScript (EN) pour exécuter l'animation elle-même, seulement pour décider quand le chargeur apparaît à l'écran.

Quand un générateur d’indicateurs de chargement CSS ne fonctionne-t-il pas ?

Un spinner généré est le mauvais outil au moment où une attente cesse d’être courte et prévisible.

Les recherches sur la convivialité de Jakob Nielsen (EN) définissent clairement le seuil. Une fois que le temps de réponse dépasse 10 secondes, affichez un indicateur de pourcentage terminé plutôt qu'un indicateur indéterminé, car un indicateur confirme l'activité mais ne dit rien sur la quantité restante.

Chaque animation produite par un générateur d’indicateurs de chargement CSS est indéterminée par conception, la barre de progression ci-dessus incluse. Aucun d'entre eux ne calcule un pourcentage réel, car le générateur n'a aucune idée du temps que prendra votre demande réelle.

• Longs téléchargements, exportations ou tâches à plusieurs étapes, où l'utilisateur doit savoir combien il reste
• Réponses très courtes sous environ 300 millisecondes, où tout chargeur ajoute juste un éclair de mouvement que l'utilisateur enregistre à peine
• Appareils bas de gamme exécutant plusieurs chargeurs animés à la fois, où chacun est en compétition pour les mêmes ressources de compositeur
• Bibliothèques de composants ou systèmes de conception qui expédient déjà leur propre état de chargement. L'ajout de CSS généré crée deux sources de vérité contradictoires

Le coût en termes de convivialité de ce décalage est discret mais réel. Un spinner assis sur l'écran au-delà du point où un utilisateur s'attendait à une réponse se lit comme la page étant bloquée, pas comme des progrès étant faits.

Les générateurs n'intègrent pas non plus de durée d'affichage minimale, donc une requête qui se résout presque instantanément fait clignoter et disparaître le chargeur. Les équipes adoucissent généralement cela avec une courte transition d’opacité plutôt qu’une coupure brutale.

Questions fréquentes : Générateur d’indicateurs de chargement CSS

Quelle est la différence entre un CSS Loader et un CSS Spinner ?

Un spinner CSS est un type d'animation spécifique, une forme en rotation. Un chargeur CSS est le terme plus large, couvrant les spinners, les points, les barres, les impulsions et les écrans squelette.

Chaque spinner est un indicateur de chargement. Tous les chargeurs ne sont pas des spinners.

Devriez-vous utiliser un indicateur de chargement CSS ou une animation Lottie à la place ?

Lottie (EN) rend des animations vectorielles basées sur JSON exportées d'After Effects, conçues pour des mouvements illustrés complexes.

Un chargeur CSS reste plus léger et plus simple, mieux adapté aux spinners simples et aux barres de progression. Faites appel à Lottie lorsque l'animation a besoin d'illustration, pas seulement de mouvement.

Un générateur d’indicateurs de chargement CSS est-il gratuit ?

La plupart des générateurs de chargeurs CSS, celui-ci inclus, sont gratuits pour la sortie CSS principale. Les niveaux payants s'appliquent généralement aux extras tels que l'exportation GIF ou APNG, la personnalisation des icônes ou la suppression de l'attribution.

Les bibliothèques open-source comme SpinKit et Load Awesome portent une licence MIT sans frais.

Quelles erreurs les développeurs font-ils en utilisant des chargeurs CSS ?

Copier les noms de classe d'un générateur directement dans un projet sans les renommer provoque des collisions avec les styles existants.

Sauter l'enveloppe aria-live est courant. Il en va de même pour le chargement de plusieurs bibliothèques de spinner sur une page, gonflant le paquet CSS.

Que devriez-vous vérifier d'abord lorsque vous choisissez un générateur d’indicateurs de chargement CSS ?

Un générateur d’indicateurs de chargement CSS gagne sa place dans un projet une fois que l'animation exportée n'utilise que la transformation et l'opacité, est livrée sous une licence réutilisable et obtient le wrapper d'accessibilité avant le lancement.

Trois vérifications décident s'il survit à une vraie base de code :

• Méthode de rendu : transformation et opacité uniquement
• Licence : MIT ou CC0 conditions
• Enveloppe d'accessibilité : rôle, aria-live, aria-busy

Les exportations basées sur SVG rendent les formes complexes plus lisses que les CSS purs. Le compromis est un poids de fichier supplémentaire et un balisage au niveau du trait que la plupart des projets ne touchent plus jamais.

Le WCAG classe le contrôle des mouvements déclenchés par interaction au niveau AAA, son niveau le plus optionnel, mais le dysfonctionnement vestibulaire contre lequel il protège affecte 35,4% des adultes américains de plus de 40 ans.

Tout ce qui va au-delà d'un spinner ou d'une barre prédéfinis appartient à un générateur d'animation keyframe dédié conçu pour un timing personnalisé en plusieurs étapes.