Generatore di loader CSS (caricamento)
Tocca un modello, regola colore, dimensione e velocità e copia il codice. Tutti usano solo transform e opacity, leggeri per il browser, e rispettano chi preferisce meno movimento.
Come si usaAnimazioni di caricamento in CSS
Disponibile in: 
Generatore di loader CSS (caricamento): a cosa serve
Scegli tra sette modelli di indicatore di caricamento (anello, anello doppio, punti, barre, pulsazione, barra di avanzamento e quadrato rotante) e regola colore, dimensione e durata. Le animazioni usano solo transform e opacity.
Il codice include role=status, un testo nascosto per gli screen reader e un’animazione più lenta per chi chiede meno movimento nel sistema.
Come si usa
- Scegli il modello di loader.
- Regola colore, dimensione e durata.
- Copia l’HTML e il CSS.
Quando usarlo
- Schermate di caricamento di siti e sistemi.
- Sostituire le GIF di caricamento pesanti.
Domande frequenti
Perché usare il CSS invece di una GIF?
Il loader in CSS pesa pochi byte, resta nitido su qualsiasi schermo, cambia colore con una variabile e gira fuori dal thread principale del browser, quindi resta fluido anche mentre la pagina si carica.
Il loader è accessibile?
Il codice include role=status e un testo nascosto (Caricamento…) per gli screen reader. Con prefers-reduced-motion, l’animazione diventa molto più lenta per chi chiede meno movimento.
Quando mostrare un loader?
Solo quando l’attesa supera circa mezzo secondo. Per attese molto brevi, il loader che lampeggia sullo schermo dà più fastidio che aiuto.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.