Generatore di Loader CSS

Come funziona il CSS generato

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

Lo spinner è un cerchio disegnato con un bordo spesso. La regola border-top-color colora solo la parte superiore dell’anello con il colore di accento, così l’anello si legge come un arco, e la regola @keyframes spin lo ruota attorno al suo centro. Ruotare con transform: rotate() mantiene l’animazione leggera, perché il browser sposta l’elemento sul compositore invece di ridisegnarlo fotogramma per fotogramma.

Per mostrarlo in una pagina, aggiungi un elemento e carica il CSS:

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

Rendilo accessibile

• Aggiungi role="status" così gli screen reader annunciano lo spinner.
• Imposta aria-label con il testo di stato, ad esempio “Caricamento”.
• Non nascondere contenuti dietro uno spinner per più di qualche secondo senza un fallback di timeout.
• Rispetta prefers-reduced-motion. Per chi l’ha disattivata, sostituisci l’animazione rotante con una semplice dissolvenza o un testo statico “Caricamento…”:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

Quando usare uno spinner e quando un’interfaccia ottimistica

• Risposta sotto i 100 ms: nessuno spinner necessario; l’occhio umano percepisce a malapena il ritardo.
• 100 ms – 1 s: uno spinner discreto (piccolo cerchio, testo del pulsante “Caricamento…”) evita i doppi clic.
• 1 s – 10 s: uno spinner ben visibile, idealmente con avanzamento se misurabile.
• > 10 s: non è un problema di spinner; scopri cosa è lento e risolvilo.

Per gli invii di moduli e i clic sui pulsanti, uno spinner dentro il pulsante di solito è meglio di una sovrapposizione a schermo intero.