Generatore di CSS / Spinner

Una breve storia dell'animazione CSS che alimenta il tuo spinner

La regola @keyframes e l'abbreviazione animation che questo generatore emette sono definite nel CSS Animations Module Level 1. Il primo Working Draft del W3C è stato pubblicato il 20 marzo 2009 e la spec ha finalmente raggiunto la Raccomandazione W3C l'11 dicembre 2018, nove anni dopo. A quel punto, ogni browser in uso supportava la sintassi da anni: Safari 4 (giugno 2009) con il prefisso -webkit-, Firefox 5 (giugno 2011), Internet Explorer 10 (ottobre 2012), e senza prefisso da Chrome 43 ad aprile 2015. Il CSS Animations Module Level 2 è il Working Draft attuale e aggiunge le animazioni scroll-driven attraverso animation-timeline (rilasciato in Chrome 115, luglio 2023; Safari e Firefox hanno seguito a fine 2024). La rotazione nel preset «spinner» viene dal CSS Transforms Module Level 1, una spec separata in Candidate Recommendation da febbraio 2019 ma universalmente rilasciata: transform: rotate(360deg) al 100% all'interno di un blocco @keyframes è ciò che fa ruotare l'anello.

L'accessibilità non è opzionale: la preferenza «Riduci movimento»

Ogni sistema operativo rilasciato dal 2014 include un'impostazione di accessibilità «Riduci movimento», macOS «Riduci movimento» (in Accessibilità → Schermo), iOS «Riduci movimento», Windows «Mostra animazioni», Android «Rimuovi animazioni», GNOME «Abilita animazioni» disattivata. La media query prefers-reduced-motion (definita in Media Queries Level 5, primo Working Draft pubblico W3C novembre 2017) consente al tuo CSS di rilevare questa preferenza e fermare lo spinner. Avvolgi sempre qualsiasi spinner in:

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

Il Criterio di Successo WCAG 2.1 2.3.3 «Animazioni da Interazioni» (Livello AAA, Raccomandazione W3C 5 giugno 2018) richiede che qualsiasi animazione di movimento attivata da interazione possa essere disabilitata a meno che il movimento non sia essenziale. Uno spinner raramente è essenziale. WCAG 2.2 (ottobre 2023) eredita la stessa regola.

Per gli screen reader, avvolgi lo spinner in <div role="status" aria-live="polite"> con un testo «Caricamento…» nascosto visivamente. Quando il caricamento si completa, sostituisci il contenuto; la regione live annuncia «Caricato» alla tecnologia assistiva senza gridare. Imposta aria-busy="true" sulla regione contenente durante il caricamento e aria-busy="false" dopo. Questo pattern è documentato nel capitolo regioni live della Guida alle Pratiche di Authoring ARIA del W3C.

Perché gli spinner CSS rimangono fluidi a 60 fps

Le pipeline di rendering dei browser moderni hanno tre fasi: layout (calcolo delle posizioni), paint (riempimento dei pixel) e composite (combinazione dei livelli sulla GPU). Le proprietà transform e opacity sono le uniche due che saltano il layout e il paint e girano puramente sul thread del compositore. Animarle è essenzialmente gratuito a qualsiasi framerate. Animare width, height, top, left, margin, o qualsiasi cosa che cambi il box model forza un passaggio completo layout-e-paint per ogni frame e scende rapidamente sotto i 60 fps su dispositivi di fascia bassa. Ogni preset in questo generatore anima solo transform e opacity per questo motivo. Se hai bisogno di un suggerimento per il browser, will-change: transform (definito in CSS Will Change Module Level 1, W3C Candidate Recommendation 26 aprile 2022) promuove l'elemento al proprio livello di compositore; usa con parsimonia perché ogni livello costa memoria GPU.

Quando uno spinner è la risposta giusta, e quando non lo è

In Response Times: The 3 Important Limits (1993, ribadito nel 2014), Jakob Nielsen del Nielsen Norman Group ha definito tre soglie di percezione: 0,1 secondo è «istantaneo», 1 secondo è il limite per il flusso di pensiero ininterrotto, 10 secondi è il limite per mantenere l'attenzione dell'utente. Mappa la tua strategia di loader a queste:

• Meno di 1 secondo: nessun indicatore. Uno spinner che lampeggia per 300 ms è peggio di nessuno spinner: l'occhio registra il lampeggio come un glitch.
• 1 a 5 secondi: uno spinner indeterminato o una barra stile barber-pole. Dice all'utente «sta succedendo qualcosa» senza impegnarsi su una durata.
• 5 a 10 secondi: una <progress max="100" value="42"> determinata con una percentuale. Gli utenti tollerano meglio una lunga attesa quando possono vedere il progresso.
• Navigazione tra route SPA: uno schermo scheletro (riquadri grigi segnaposto che imitano il layout finale) sembra più veloce di uno spinner. Luke Wroblewski ha coniato il termine nel suo post del marzo 2013 Mobile First Patterns; lo «shimmer» di Facebook (2014) e il Material 2 di Google (maggio 2018) lo hanno reso mainstream.

Funzioni di easing e cosa si sente da ognuna

La proprietà animation-timing-function (e il CSS Easing Functions Module Level 1, Candidate Recommendation 6 dicembre 2022) sceglie come il valore progredisce tra keyframe:

• linear, tasso costante. Corretto per uno spinner continuo; sbagliato per qualsiasi cosa che decelera verso uno stato finale.
• ease, ease-in, ease-out, ease-in-out, alias keyword per curve cubic bezier comuni. Predefinito del browser è ease.
• cubic-bezier(x1, y1, x2, y2), curva personalizzata con quattro float in [0, 1]. cubic-bezier(.25, .1, .25, 1) è la curva «ease» standard. Prova cubic-bezier(.68, -.55, .27, 1.55) per un effetto di rimbalzo «overshoot».
• steps(n, jump-end), salti discreti, ideale per un loader a punti che cambia stato senza interpolare.

Errori comuni

• Spedire uno spinner senza prefers-reduced-motion. Gli utenti con disturbi vestibolari, trigger di emicrania o sensibilità all'attenzione vengono colpiti da ogni anello rotante sul web. La correzione sono due righe di CSS.
• Dimenticare role="status" e il testo nascosto visivamente. Uno spinner che ruota solo visivamente non dice nulla a un utente di screen reader.
• Velocità di animazione sotto 0,5 secondi per ciclo. Uno spinner che completa in 0,3 s sembra frenetico e si legge come «errore» per molti utenti. 1 a 1,5 s per ciclo è l'intervallo confortevole.
• Animare proprietà di layout. Animare width, margin o top causa thrashing del layout. Rimani su transform e opacity.
• Mostrare uno spinner per ogni operazione. Se i dati arrivano in 100 ms, lo spinner lampeggia e si legge come un glitch. Ritarda lo spinner di 200 a 300 ms con un setTimeout che cancelli in caso di successo.
• Dimenticare di centrare lo spinner. Un `.spinner` che fluttua nell'angolo in alto a sinistra di una sezione perché il suo contenitore non è un contenitore flex/grid è il secondo bug visivo più comune.

Altre domande frequenti

Questi spinner funzioneranno nei vecchi browser?

Tutti i browser moderni (Chrome 43+, Firefox 16+, Safari 9+, Edge 12+) supportano @keyframes e transform senza alcun prefisso. Internet Explorer 10 e 11 richiedono il prefisso -ms- in alcuni posti ma per il resto funzionano. IE 9 e inferiori non hanno supporto CSS animation: ricadi su un GIF animato, o usa @supports (animation: spin 1s) per il feature detection.

Come fermo lo spinner quando il contenuto si carica?

Rimuovi l'elemento dal DOM, nascondilo con display: none o l'attributo hidden, o metti in pausa l'animazione con animation-play-state: paused. Mettere in pausa è il più economico se potresti mostrarlo di nuovo. Se hai usato il pattern ARIA, imposta anche aria-busy="false" sul contenitore e sostituisci il testo di caricamento con l'annuncio dello stato caricato.

Posso personalizzare i colori dello spinner oltre quello che il picker permette?

Sì. Il CSS di output usa valori hex / rgb / hsl regolari; sostituiscili con variabili CSS (var(--brand-primary)) così lo spinner segue il tuo design system. Per uno spinner bicolore, modifica l'abbreviazione border-color: border-color: var(--brand) transparent transparent transparent dà il look classico «arco a un quarto».

Perché non usare semplicemente un'animazione SVG o Lottie?

Gli spinner CSS pesano sotto 200 byte, non hanno bisogno di richieste extra, di runtime JavaScript, e si renderizzano prima di qualsiasi caricamento di risorsa esterna. SVG è ottimo per forme complesse; Lottie è ottimo per animazioni create da designer da After Effects. Per un indicatore generico «qualcosa si sta caricando», CSS è lo strumento più economico che fa il lavoro correttamente.

Viene tracciato o inviato qualcosa a un server?

No. Il generatore gira interamente nel JavaScript del tuo browser. Le tue scelte di colore, regolazioni di dimensione e CSS copiato non lasciano mai la pagina. Verifica nella scheda Rete di DevTools.