Generatore di CSS per spinner nei pulsanti

Un esempio pratico

Supponi di avere un pulsante “Salva” blu scuro con testo bianco. Nel generatore inserisci dimensione 16, spessore 2, colore #ffffff e velocità 0.8. Lo strumento produce:

.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 traccia dell’anello è un grigio chiaro fisso, visibile su un pulsante scuro. Se vuoi una traccia più discreta, sostituisci #eee con un valore semitrasparente come rgba(255, 255, 255, 0.3) nel CSS incollato. Il colore dell’arco resta quello scelto.

Posizionalo dentro il pulsante

Metti l’elemento dello spinner prima dell’etichetta e rendi il pulsante una riga flex, così i due stanno su una linea con uno spazio tra loro:

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

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

Aggiungi lo spinner e lo stato disabled solo mentre la richiesta è in corso. Rimuovili entrambi quando termina. Disattivare il pulsante è ciò che impedisce gli invii doppi; lo spinner è il segnale che spiega perché.

Dimensioni e spessore per i pulsanti

Note

• Il generatore crea un unico anello circolare. Non crea il pulsante, quindi gli stili del pulsante restano tuoi.
• Un anello più spesso di un quarto del diametro si riempie e sembra un disco, quindi mantieni valori sottili per le dimensioni piccole.
• Tieni l’etichetta accanto allo spinner. Uno spinner senza testo può essere difficile da interpretare per alcuni utenti.

Evita gli spostamenti del layout

Se lo spinner compare e il pulsante all’improvviso si allarga, il layout si sposta e l’area cliccabile cambia posizione. Ci sono due soluzioni semplici. Dai al pulsante una larghezza minima che contenga già lo spinner e l’etichetta più lunga. Oppure riserva lo spazio dello spinner fin dall’inizio, mostrando un segnaposto vuoto di 16 px prima dell’etichetta. Poiché l’anello generato ha larghezza e altezza fisse in pixel, è facile riservare esattamente lo spazio che gli serve.