Generatore di Loader CSS

Che cos'è questo strumento?

Un loader CSS è un piccolo elemento animato — un anello rotante, puntini che rimbalzano, un cerchio pulsante o una barra di avanzamento in movimento — usato per mostrare che il contenuto sta caricando, senza loop di animazione JavaScript e senza bisogno di immagini o GIF. È costruito con un paio di regole CSS più un blocco @keyframes che definisce come l'elemento si muove nel tempo.

Questo strumento genera quattro pattern di loader comuni con CSS reale e funzionante: uno spinner rotante basato sul bordo, tre puntini che rimbalzano in sequenza, un cerchio che pulsa dentro e fuori, e una barra con riempimento scorrevole. Regola dimensione, colore e durata nell'anteprima dal vivo, poi copia il CSS generato e l'elemento HTML minimo a cui si applica.

Fonte: CSS Animations Level 1, W3C — la specifica che definisce @keyframes e le proprietà di animazione da cui questi loader sono costruiti.

Perché usarlo?

• L'anteprima dal vivo si anima in tempo reale mentre cambi stile, dimensione, colore o velocità — vedi esattamente cosa userai.
• Genera il CSS completo, incluso il blocco @keyframes, non solo un frammento da completare da soli.
• Genera anche il markup HTML esatto atteso dal CSS, senza dover indovinare nomi di classi o struttura degli elementi.
• Quattro pattern di animazione distinti (spinner, puntini, pulsazione, barra) coprono i casi d'uso più comuni degli stati di caricamento.
• Animazione CSS pura — niente JavaScript, niente file immagine, più leggera e fluida di una GIF animata.
• Funziona interamente nel browser, gratis, senza registrazione.

Come si usa

1. Scegli uno stile di loader: anello rotante, puntini che rimbalzano, cerchio pulsante o barra di avanzamento.
2. Trascina il cursore della dimensione per ingrandire o rimpicciolire il loader.
3. Scegli un colore — diventa il colore d'accento del loader (il bordo rotante, i puntini o il riempimento della barra).
4. Regola la velocità per rendere l'animazione più veloce o più lenta; la maggior parte dei loader di interfaccia funziona bene tra 0,6s e 1,5s per ciclo.
5. Copia il CSS generato nel tuo foglio di stile e incolla lo snippet HTML dove deve apparire il loader.

Esempio

Input

Stile: anello rotante · Dimensione: 40px · Colore: arancione · Velocità: 1,0s

Risultato

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

Uno spinner ad anello classico: un cerchio con un bordo quasi trasparente su tre lati e un colore pieno sul quarto, che ruota continuamente con un'animazione lineare e infinita.

Perché usare loader CSS invece di GIF animate

Gli spinner GIF animati sono stati la scelta predefinita per anni, ma oggi un loader CSS è quasi sempre la scelta migliore: sono poche centinaia di byte di testo invece di un file immagine binario, si adattano a qualsiasi dimensione senza pixellarsi perché sono disegnati con bordi e transform, e il colore può essere cambiato all'istante con un solo valore CSS invece di riesportare una nuova immagine.

I quattro stili qui — spinner, puntini, pulsazione, barra — sono anche quelli che compaiono più spesso nelle interfacce reali, dagli stati di caricamento dei pulsanti agli overlay a pagina intera. Ognuno anima solo transform e opacity nei keyframes, cosa che i browser possono animare in modo fluido sulla GPU senza rallentare il resto della pagina.

Scegliere lo stile giusto per la situazione

• Anello rotante: la scelta più neutra e generica — funziona bene dentro pulsanti e piccoli stati di caricamento inline.
• Puntini che rimbalzano: dà una sensazione più leggera e giocosa; comune per indicatori 'sta scrivendo...' nelle chat e attese brevi.
• Cerchio pulsante: buono per un indicatore di caricamento a elemento singolo o come punto di stato 'attivo/live'.
• Barra di avanzamento: suggerisce un progresso ed è spesso attesa per caricamenti di pagina o processi a più fasi, anche senza percentuale esatta.

Usare il loader nel tuo progetto

Incolla il CSS generato una volta nel tuo foglio di stile, poi riutilizza lo snippet HTML ovunque serva uno stato di caricamento — dentro un pulsante durante l'invio di un modulo, sopra una card mentre si recuperano dati, o centrato in un overlay a pagina intera. Poiché l'animazione è CSS puro, attivarla o disattivarla è semplice quanto aggiungere o rimuovere l'elemento dal DOM, o nasconderlo con display: none.

→ Generatore di ombreggiatura dei riquadri · Minificatore CSS

Domande frequenti