Generatore di Loader CSS
Il generatore di loader CSS crea animazioni di caricamento in puro CSS in sei stili (spinner, puntini che rimbalzano, anello, pulse, barre e doppio anello) con dimensione, colore, velocità e spessore regolabili, e restituisce sia il CSS sia l'HTML.
Informazioni su questo strumento
Il generatore di loader CSS crea animazioni di caricamento in puro CSS in sei stili (spinner, puntini che rimbalzano, anello, pulse, barre e doppio anello) con dimensione, colore, velocità e spessore regolabili, e restituisce sia il CSS sia l'HTML.
Come si usa
- Scegli uno stile di loader.
- Regola dimensione, colore, velocità e spessore.
- Controlla l'anteprima in tempo reale.
- Clicca Copy CSS + HTML e incolla entrambi nella tua pagina.
Da sapere
- I loader in puro CSS non richiedono immagini, GIF o JavaScript.
- Gli spinner ruotano con @keyframes e transform: rotate(), un'animazione efficiente.
- Il markup è un singolo elemento, o pochi elementi figli per puntini e barre.
- Aggiungi role="status" e un'etichetta visivamente nascosta come “Loading…” perché gli screen reader annuncino il loader.
- Valuta di rallentare o mettere in pausa i loader con prefers-reduced-motion.
Funziona interamente nel tuo browser: nulla di ciò che inserisci viene caricato o salvato.
Domande frequenti
Come creo uno spinner di caricamento in CSS?
Dai a un elemento quadrato un bordo con un lato colorato, border-radius: 50% e un'animazione @keyframes di rotazione, oppure copiane uno da questo generatore.
I loader CSS sono meglio delle GIF?
Di solito sì: sono più leggeri, restano nitidi a qualsiasi dimensione e puoi cambiarne colore e velocità con il CSS.
Come rendo accessibile un loader?
Racchiudilo in un elemento con role="status" e includi un testo nascosto come “Loading…” così le tecnologie assistive possono annunciarlo.
Come centro il loader nella pagina?
Mettilo in un contenitore con display: flex; justify-content: center; align-items: center;.