Generatore di CSS per spinner di caricamento

Cosa ottieni

Il generatore scrive due regole: una classe .loader e un blocco @keyframes spin. La classe disegna un cerchio, gli dà un anello grigio chiaro e colora il bordo superiore di quell’anello. I keyframes fanno compiere al cerchio una rotazione completa, e la riga animation la ripete all’infinito. Non serve altro: nessun file immagine, nessun font di icone e nessuno script.

Con i valori predefiniti (60 px, anello da 6 px, #10b981, 1 secondo) l’output è questo:

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

Aggiungilo alla tua pagina

Incolla il CSS nel tuo foglio di stile, poi aggiungi un elemento vuoto dove deve comparire il loader:

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

Mostra l’elemento mentre il lavoro è in corso e rimuovilo, oppure nascondilo con display: none, quando arriva il contenuto. Gli attributi role e aria-label permettono agli screen reader di annunciare lo stato.

Dimensioni che funzionano

Una regola pratica è uno spessore di circa un decimo del diametro. Molto più sottile appare debole sugli schermi ad alta risoluzione, molto più spesso trasforma l’anello in una macchia.

Cose da sapere

• Il colore della traccia è fisso sul grigio chiaro (#eee). Su uno sfondo scuro, modifica questo valore nel CSS incollato.
• Lo strumento crea un unico spinner circolare. Punti, barre e altre forme richiedono un markup diverso.
• Se nel tuo progetto esistono già una classe chiamata loader o un’animazione chiamata spin, rinominale nel CSS incollato per evitare conflitti tra le regole.

Mostrare e nascondere lo spinner

Uno spinner di caricamento deve comparire quando il lavoro inizia e scomparire quando finisce. Uno schema semplice consiste nel tenere un attributo hidden sull’elemento e rimuoverlo quando parte una richiesta. Se l’attesa è di solito molto breve, aggiungi un piccolo ritardo di alcune centinaia di millisecondi prima di mostrare l’anello, così le risposte immediate non fanno lampeggiare lo spinner. Qualunque scelta tu faccia, nascondi sempre lo spinner anche in caso di errore, altrimenti i visitatori aspetteranno qualcosa che è già fallito.