Générateur de CSS pour spinner de bouton

Un exemple concret

Imaginons un bouton « Enregistrer » bleu foncé avec un texte blanc. Dans le générateur, saisissez la taille 16, l’épaisseur 2, la couleur #ffffff et la vitesse 0.8. L’outil produit :

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

La piste de l’anneau est un gris clair fixe, bien visible sur un bouton foncé. Si vous voulez une piste plus discrète, remplacez #eee par une valeur translucide, comme rgba(255, 255, 255, 0.3), dans le CSS collé. La couleur de l’arc reste celle que vous avez choisie.

Placez-le dans le bouton

Placez l’élément du spinner avant le libellé et faites du bouton une ligne flex pour que les deux restent alignés avec un espace entre eux :

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="Enregistrement"></span>
  Enregistrement
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

Ajoutez le spinner et l’état disabled uniquement pendant que la requête est en cours. Retirez les deux lorsqu’elle se termine. C’est la désactivation du bouton qui empêche les envois en double ; le spinner est le signal qui explique pourquoi.

Taille et épaisseur pour les boutons

Remarques

• Le générateur crée un seul anneau circulaire. Il ne crée pas le bouton, donc les styles de votre bouton restent les vôtres.
• Un anneau plus épais qu’un quart de son diamètre se remplit et ressemble à un disque ; gardez donc des valeurs fines pour les petites tailles.
• Gardez le libellé à côté du spinner. Un spinner sans texte peut être difficile à interpréter pour certains utilisateurs.

Évitez les décalages de mise en page

Si le spinner apparaît et que le bouton s’élargit brusquement, la mise en page se décale et la zone cliquable se déplace. Deux solutions simples existent. Donnez au bouton une largeur minimale qui accueille déjà le spinner et le libellé le plus long. Ou réservez dès le départ l’espace du spinner en affichant un espace vide de 16 px avant le libellé. Comme l’anneau généré a une largeur et une hauteur fixes en pixels, il est facile de réserver exactement la place dont il a besoin.