Générateur de CSS pour spinner de chargement

Ce que vous obtenez

Le générateur écrit deux règles : une classe .loader et un bloc @keyframes spin. La classe dessine un cercle, lui donne un anneau gris clair et colore le bord supérieur de cet anneau. Les keyframes font effectuer au cercle une rotation complète, et la ligne animation la répète indéfiniment. Rien d’autre n’est nécessaire : ni fichier image, ni police d’icônes, ni script.

Avec les valeurs par défaut (60 px, anneau de 6 px, #10b981, 1 seconde), le résultat est le suivant :

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

Ajoutez-le à votre page

Collez le CSS dans votre feuille de style, puis ajoutez un élément vide là où le loader doit apparaître :

<div class="loader" role="status" aria-label="Chargement"></div>

Affichez l’élément pendant que le traitement est en cours, puis retirez-le, ou masquez-le avec display: none, lorsque le contenu arrive. Les attributs role et aria-label permettent aux lecteurs d’écran d’annoncer l’état.

Tailles qui fonctionnent

Une règle empirique consiste à prendre une épaisseur d’environ un dixième du diamètre. Beaucoup plus fin, l’anneau paraît pâle sur les écrans haute résolution ; beaucoup plus épais, il devient une tache.

Points à connaître

• La couleur de la piste est fixée en gris clair (#eee). Sur un fond sombre, modifiez cette valeur dans le CSS collé.
• L’outil crée un seul spinner circulaire. Les points, les barres et d’autres formes demandent un balisage différent.
• Si une classe nommée loader ou une animation nommée spin existe déjà dans votre projet, renommez-les dans le CSS collé pour éviter les conflits entre les règles.

Afficher et masquer le spinner

Un spinner de chargement doit apparaître au début du traitement et disparaître à sa fin. Un schéma simple consiste à garder un attribut hidden sur l’élément et à le retirer lorsqu’une requête commence. Si l’attente est généralement très courte, ajoutez un léger délai de quelques centaines de millisecondes avant d’afficher l’anneau, pour que des réponses instantanées ne fassent pas clignoter un spinner. Quel que soit votre choix, masquez aussi toujours le spinner en cas d’erreur, sinon les visiteurs attendront quelque chose qui a déjà échoué.