Générateur d'animation de chargement CSS (spinner)

Comment ça marche

Saisissez dans le panneau de gauche la couleur de l'animation ; les écritures HEX comme #2F6FED, rgb(47, 111, 237) et hsl(220, 84%, 56%) sont reconnues, et la couleur choisie s'affiche en pastille sous le résultat. Choisissez l'un des quatre motifs dans Type d'animation et indiquez la taille en pixels ; un anneau de 48 pixels reçoit une bordure de 6 pixels et fait un tour toutes les 0,8 seconde. Les premières lignes du code contiennent la div unique à placer dans votre page : grâce à role="status" et aria-label, les lecteurs d'écran l'annoncent comme « Chargement ». Collez le CSS qui suit dans votre feuille de style ; la classe et la règle @keyframes se répondent, copiez-les ensemble. Le code se termine par un bloc @media qui ralentit l'animation au tiers de sa vitesse pour les personnes qui ont activé la réduction des animations. L'outil écrit le code mais ne le joue pas ; pour voir l'animation, ouvrez le code dans votre propre page ou dans un bac à sable de code en ligne.

Cet outil est aussi connu sous le nom de spinner css, animation de chargement css, loader css, css loading spinner.

Qu'est-ce que @keyframes ?

@keyframes est la règle CSS qui définit les étapes d'une animation dans le temps. On y place des points en pourcentage, ou avec from et to, et on indique pour chacun l'apparence de l'élément : pas tourné à 0 %, tourné de 360 degrés à 100 %. Le navigateur calcule lui-même les images intermédiaires. L'animation démarre quand l'élément reçoit la propriété animation avec le nom de la règle, une durée et un nombre de répétitions ; dans cet outil, la répétition est infinie.

Qu'est-ce que prefers-reduced-motion ?

prefers-reduced-motion est la requête média CSS qui indique à une page si l'utilisateur a activé la réduction des animations dans son système. La désactivation des animations sous Windows, « Réduire les animations » sous macOS et iOS et « Supprimer les animations » sous Android la font passer à reduce. La page doit alors atténuer ou supprimer les mouvements amples et rapides ; les règles d'accessibilité WCAG le recommandent.

Quelle est la différence entre un loader CSS et un GIF de chargement ?

Un GIF de chargement est un fichier image figé : il faut le télécharger, sa couleur et sa taille ne changent pas, il devient flou quand on l'agrandit et ses bords transparents paraissent crénelés sur fond sombre. Un loader CSS tient en quelques lignes de code : rien de plus à télécharger, la couleur et la taille changent avec un nombre, il reste net sur tous les écrans et peut respecter la réduction des animations. Le seul avantage du GIF est de fonctionner là où le CSS ne passe pas, par exemple dans le corps d'un e-mail.

Pourquoi une seule div, et pourquoi le bloc de mouvement réduit ?

L'indicateur de chargement est l'élément d'une page que l'on ajoute et retire le plus souvent. Une structure de cinq span imbriqués encombre le HTML et multiplie les risques d'erreur quand JavaScript l'affiche et la masque. Les quatre motifs proposés ici fonctionnent avec une seule div : l'anneau est dessiné par une bordure, les trois points par une ombre (box-shadow), les barres par trois bandes d'arrière-plan et la pulsation par un changement d'échelle. Aucune image, police ni bibliothèque n'est chargée.

Chez certaines personnes, une rotation ou un rebond continu provoque vertiges et nausées. Elles activent la réduction des animations dans leur système, et le navigateur le signale à la page par prefers-reduced-motion. Le bloc placé à la fin du code n'arrête pas l'animation : il la ralentit trois fois. On voit toujours que quelque chose charge, sans le mouvement rapide.

Quel motif pour quel usage ?

L'anneau qui tourne est l'indicateur le plus connu. Il convient dans un bouton, pendant l'envoi d'un formulaire ou le chargement d'une partie de page, et reste lisible en petite taille, entre 16 et 24 pixels. Les trois points qui rebondissent signifient « votre correspondant écrit » dans les messageries ; placés près d'une ligne de texte, ils conviennent aux attentes courtes.

Les barres évoquent un traitement continu : audio, musique, flux de données. La pulsation est un motif calme, adapté à un repère de position sur une carte ou à un indicateur de direct, partout où il faut dire « il se passe quelque chose ici ». Si l'attente dépasse quelques secondes, aucun spinner ne suffit : utilisez une barre de progression ou un écran squelette.

Questions fréquentes

Comment faire une animation de chargement en CSS ?

Placez une div dans la page, donnez-lui une taille et une couleur en CSS, décrivez le mouvement avec une règle @keyframes et reliez-la à la div avec la propriété animation, en boucle infinie. Cet outil écrit tout ce code pour quatre motifs prêts à l'emploi ; il vous reste à choisir la couleur et la taille, puis à copier.

Comment masquer l'indicateur une fois le chargement terminé ?

Retirez la div de la page ou donnez-lui l'attribut hidden quand le travail est fini. Une animation invisible qui reste dans la page occupe le processeur pour rien ; un élément en display: none n'est pas animé.

Comment changer la vitesse de l'animation ?

La ligne animation du code indique la durée en secondes (par exemple 0.8s). Un nombre plus petit accélère l'animation, un nombre plus grand la ralentit. Modifiez la durée du bloc de mouvement réduit dans la même proportion.

Que dit un lecteur d'écran pour cet indicateur ?

Grâce à role="status" et aria-label="Chargement" sur la div, le lecteur d'écran la traite comme un message d'état et lit l'étiquette. L'animation elle-même est visuelle et n'est pas annoncée ; adaptez l'étiquette à la langue de votre site.