Générateur CSS de loaders et spinners, gratuit

Brève histoire de l'animation CSS qui alimente votre spinner

La règle @keyframes et le raccourci animation que ce générateur émet sont définis dans le module CSS Animations Niveau 1. Le premier Working Draft du W3C a été publié le 20 mars 2009 et la spec a finalement atteint la Recommandation W3C le 11 décembre 2018, neuf ans plus tard. À ce moment-là, chaque navigateur en service supportait la syntaxe depuis des années : Safari 4 (juin 2009) avec le préfixe -webkit-, Firefox 5 (juin 2011), Internet Explorer 10 (octobre 2012), et sans préfixe par Chrome 43 en avril 2015. Le module CSS Animations Niveau 2 est le Working Draft actuel et ajoute les animations pilotées par le défilement via animation-timeline (livré dans Chrome 115, juillet 2023 ; Safari et Firefox ont suivi fin 2024). La rotation du préréglage « spinner » vient du module CSS Transforms Niveau 1, une spec séparée en Candidate Recommendation depuis février 2019 mais universellement livrée : transform: rotate(360deg) à 100% dans un bloc @keyframes est ce qui fait tourner l'anneau.

L'accessibilité n'est pas optionnelle : la préférence « Réduire les mouvements »

Chaque système d'exploitation publié depuis 2014 inclut un paramètre d'accessibilité « Réduire les mouvements », macOS « Réduire les animations » (dans Accessibilité → Affichage), iOS « Réduire les animations », Windows « Afficher les animations », Android « Supprimer les animations », GNOME « Activer les animations » désactivé. La media query prefers-reduced-motion (définie dans Media Queries Niveau 5, premier Working Draft public W3C de novembre 2017) permet à votre CSS de détecter cette préférence et d'arrêter le spinner. Enveloppez toujours tout spinner dans :

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

Le critère de succès WCAG 2.1 2.3.3 « Animations à partir d'interactions » (niveau AAA, Recommandation W3C 5 juin 2018) exige que toute animation de mouvement déclenchée par une interaction puisse être désactivée à moins que le mouvement ne soit essentiel. Un spinner est rarement essentiel. WCAG 2.2 (octobre 2023) hérite de la même règle.

Pour les lecteurs d'écran, enveloppez le spinner dans <div role="status" aria-live="polite"> avec un texte « Chargement… » masqué visuellement. Quand le chargement se termine, remplacez le contenu ; la région live annonce « Chargé » aux technologies d'assistance sans crier. Définissez aria-busy="true" sur la région contenante pendant le chargement et aria-busy="false" après. Ce modèle est documenté dans le chapitre régions live du Guide des pratiques de création ARIA du W3C.

Pourquoi les spinners CSS restent fluides à 60 fps

Les pipelines de rendu des navigateurs modernes ont trois étapes : layout (calcul des positions), paint (remplissage des pixels) et composite (combinaison des couches sur le GPU). Les propriétés transform et opacity sont les deux seules qui sautent le layout et le paint et s'exécutent purement sur le thread de compositing. Les animer est essentiellement gratuit à n'importe quelle fréquence. Animer width, height, top, left, margin, ou quoi que ce soit qui change la box model force un cycle layout-et-paint complet à chaque frame et tombe rapidement sous 60 fps sur les appareils bas de gamme. Chaque préréglage de ce générateur anime uniquement transform et opacity pour cette raison. Si vous avez besoin d'un indice pour le navigateur, will-change: transform (défini dans module CSS Will Change Niveau 1, Candidate Recommendation W3C 26 avril 2022) promeut l'élément à sa propre couche de compositing ; à utiliser avec parcimonie car chaque couche coûte de la mémoire GPU.

Quand un spinner est la bonne réponse, et quand il ne l'est pas

Dans Response Times: The 3 Important Limits (1993, redit en 2014), Jakob Nielsen du Nielsen Norman Group a défini trois seuils de perception : 0,1 seconde est « instantanée », 1 seconde est la limite pour un flux de pensée ininterrompu, 10 secondes est la limite pour garder l'attention de l'utilisateur. Mappez votre stratégie de loader sur ces seuils :

• Moins d'1 seconde : pas d'indicateur du tout. Un spinner qui clignote pendant 300 ms est pire que pas de spinner : l'œil enregistre le clignotement comme un bug.
• 1 à 5 secondes : un spinner indéterminé ou une barre style barber-pole. Indique à l'utilisateur que « quelque chose se passe » sans s'engager sur une durée.
• 5 à 10 secondes : une <progress max="100" value="42"> déterminée avec un pourcentage. Les utilisateurs tolèrent mieux une longue attente quand ils voient la progression.
• Navigation entre routes SPA : un écran squelette (boîtes grises de placeholder imitant la mise en page finale) semble plus rapide qu'un spinner. Luke Wroblewski a inventé le terme dans son article de mars 2013 Mobile First Patterns ; le « shimmer » de Facebook (2014) et Material 2 de Google (mai 2018) l'ont rendu courant.

Fonctions d'accélération et ce que chacune ressent

La propriété animation-timing-function (et le module CSS Easing Functions Niveau 1, Candidate Recommendation 6 décembre 2022) choisit comment la valeur progresse entre les keyframes :

• linear, taux constant. Correct pour un spinner continu ; faux pour tout ce qui décélère vers un état final.
• ease, ease-in, ease-out, ease-in-out, alias mot-clé pour des courbes de Bézier cubiques courantes. La valeur par défaut du navigateur est ease.
• cubic-bezier(x1, y1, x2, y2), courbe personnalisée avec quatre flottants dans [0, 1]. cubic-bezier(.25, .1, .25, 1) est la courbe standard « ease ». Essayez cubic-bezier(.68, -.55, .27, 1.55) pour un effet de rebond « overshoot ».
• steps(n, jump-end), sauts discrets, idéal pour un loader à points qui change d'état sans interpoler.

Erreurs courantes

• Livrer un spinner sans prefers-reduced-motion. Les utilisateurs avec des troubles vestibulaires, des déclencheurs de migraine, ou des sensibilités à l'attention sont frappés par chaque anneau qui tourne sur le web. La correction est deux lignes de CSS.
• Oublier role="status" et le texte masqué visuellement. Un spinner qui tourne uniquement visuellement ne dit rien à un utilisateur de lecteur d'écran.
• Vitesse d'animation sous 0,5 seconde par cycle. Un spinner qui complète en 0,3 s semble frénétique et se lit comme « erreur » pour beaucoup d'utilisateurs. 1 à 1,5 s par cycle est la plage confortable.
• Animer des propriétés de layout. Animer width, margin ou top cause du thrash de layout. Restez sur transform et opacity.
• Afficher un spinner pour chaque opération. Si les données arrivent en 100 ms, le spinner clignote et se lit comme un bug. Retardez le spinner de 200 à 300 ms avec un setTimeout que vous effacez en cas de succès.
• Oublier de centrer le spinner. Un `.spinner` flottant en haut à gauche d'une section parce que son conteneur n'est pas un conteneur flex/grid est le deuxième bug visuel le plus courant.

Plus de questions fréquentes

Ces spinners fonctionneront-ils dans les anciens navigateurs ?

Tous les navigateurs modernes (Chrome 43+, Firefox 16+, Safari 9+, Edge 12+) supportent @keyframes et transform sans aucun préfixe. Internet Explorer 10 et 11 nécessitent le préfixe -ms- à certains endroits mais fonctionnent par ailleurs. IE 9 et inférieur n'ont aucun support d'animation CSS : tomber sur un GIF animé, ou utiliser @supports (animation: spin 1s) pour détecter la fonctionnalité.

Comment arrêter le spinner quand le contenu se charge ?

Soit retirer l'élément du DOM, le cacher avec display: none ou l'attribut hidden, ou mettre en pause l'animation avec animation-play-state: paused. La pause est la moins chère si vous pourriez le remontrer. Si vous avez utilisé le modèle ARIA, définissez aussi aria-busy="false" sur le conteneur et remplacez le texte de chargement par l'annonce de l'état chargé.

Puis-je personnaliser les couleurs du spinner plus que ce que le sélecteur permet ?

Oui. Le CSS de sortie utilise des valeurs hex / rgb / hsl régulières ; remplacez-les par des variables CSS (var(--brand-primary)) pour que le spinner suive votre design system. Pour un spinner bicolore, éditez le raccourci border-color : border-color: var(--brand) transparent transparent transparent donne le look classique « arc d'un quart ».

Pourquoi ne pas simplement utiliser une animation SVG ou Lottie ?

Les spinners CSS pèsent moins de 200 octets, n'ont besoin d'aucune requête supplémentaire, d'aucun runtime JavaScript, et s'affichent avant tout chargement de ressource externe. SVG est bon pour les formes complexes ; Lottie est bon pour les animations créées par des designers depuis After Effects. Pour un indicateur générique « quelque chose charge », CSS est l'outil le moins cher qui fait correctement le travail.

Quelque chose est-il suivi ou envoyé à un serveur ?

Non. Le générateur tourne entièrement dans le JavaScript de votre navigateur. Vos choix de couleur, ajustements de taille et CSS copié ne quittent jamais la page. Vérifiez dans l'onglet Réseau de DevTools.