Spinner de chargement pur CSS

Découvrez un indicateur de chargement moderne, élaboré uniquement en CSS, sans aucune image ni script JavaScript. En associant intelligemment conic-gradient et mask (ou -webkit-mask), on obtient une animation épurée traçant un dégradé rotatif tout en fluidité.

Aperçu

Code

Vous pouvez intégrer ce spinner très simplement : copiez le code ci-dessous et collez-le directement dans les fichiers HTML et CSS de votre projet.

<!-- HTML -->
<div class="premium-spinner"></div>

/* CSS */
.premium-spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgba(99, 102, 241, 0) 0%,
    rgba(99, 102, 241, 0.2) 20%,
    rgba(99, 102, 241, 1) 100%
  );
  /* Configuration du masque pour découper l'intérieur */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  animation: premium-spin 1s infinite linear;
}

@keyframes premium-spin {
  to {
    transform: rotate(360deg);
  }
}

Explication

• conic-gradient : Génère un dégradé dont les couleurs évoluent circulairement autour d’un point central. Pour ce spinner, il illustre la trajectoire de rotation via une transition douce, allant d’une transparence totale (rgba(99, 102, 241, 0)) à une opacité pleine (rgba(99, 102, 241, 1)).
• mask / -webkit-mask : Exploite un radial-gradient en tant que masque afin de rendre le cœur de l’élément transparent. L’expression calc(100% - 6px) permet d’ajuster avec précision l’épaisseur de l’anneau (ici, 6px).
• animation : Déclare transform: rotate(360deg) au sein de la règle @keyframes pour assurer une rotation perpétuelle et à vitesse constante grâce à l’attribut linear.