Générateur de spinner CSS simple

Pourquoi ce spinner est simple

De nombreux loaders utilisent plusieurs éléments imbriqués, des images de fond ou un script. Celui-ci est un seul div stylisé en cercle. L’anneau est formé d’une bordure, et seule la partie supérieure de la bordure a une autre couleur. En faisant tourner le cercle, cette partie colorée parcourt le contour. Toute la technique repose sur quatre idées :

1. Une boîte carrée avec une largeur et une hauteur égales.
2. border-radius: 50% pour transformer la boîte en cercle.
3. Une bordure grise avec un seul côté coloré, via border-top-color.
4. Une animation de rotation qui ne s’arrête jamais.

Le code complet

.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); }
}

<div class="loader"></div>

Voilà tout le loader. Il n’y a rien à télécharger ni aucune dépendance à maintenir à jour.

Le centrer

L’anneau est un élément de bloc classique. Pour le centrer sur la page ou dans un conteneur, ajoutez margin: 0 auto; à .loader pour un centrage horizontal, ou faites du parent un conteneur flex :

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Ce que cet outil ne fait pas

• Il ne produit que le style de l’anneau. Les rangées de points, les barres et les loaders à pulsations sont d’autres designs.
• La couleur de la piste est un gris clair fixe ; modifiez-la dans le CSS collé si votre fond est sombre.
• Il n’ajoute pas d’attributs d’accessibilité à votre balisage. Ajoutez vous-même role="status" et un aria-label à l’élément.

Petits ajustements après la copie

Comme le spinner ne comporte que quelques propriétés, il est facile à modifier. Pour un anneau plus léger, réduisez la largeur de la bordure. Pour un effet plus calme, augmentez la durée de l’animation. Pour utiliser le même loader en deux tailles, copiez la classe une fois et ne redéfinissez que width, height et border-width dans une deuxième classe. Garder un code aussi court est le principal avantage d’un spinner simple : vous le lisez d’un coup d’œil et modifiez n’importe quelle valeur sans chercher dans une bibliothèque.

Vous pouvez aussi teinter la piste en remplaçant #eee par une couleur adaptée à votre page, tandis que l’arc en mouvement conserve la couleur choisie dans le générateur.