Loader animato solo CSS
Indicatore di caricamento leggero, utile quando una pagina o un contenuto richiede qualche secondo.
Quando si usa
Quando un contenuto richiede qualche secondo per caricarsi e vuoi mostrare all'utente che la pagina sta lavorando.
Perché si usa
Un piccolo indicatore riduce l'incertezza e migliora la percezione di controllo, soprattutto in moduli, ricerche e caricamenti dinamici.
Vantaggi principali
- Nessuna immagine esterna
- Codice leggero
- Animazione disattivabile con prefers-reduced-motion
Anteprima del risultato
Il cerchio ruota per indicare un caricamento in corso.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<div class="loader" role="status" aria-label="Caricamento"></div>
<style>
.loader{
width:46px;
height:46px;
border:5px solid #d8e1ec;
border-top-color:#2463a9;
border-radius:50%;
animation:gira 1s linear infinite;
}
@keyframes gira{
to{transform:rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
.loader{animation:none}
}
</style>Da personalizzare: Dimensione, spessore del bordo, colore principale e posizione nella pagina.
Errore da evitare: Non usare loader infiniti senza spiegare cosa sta accadendo o senza gestire eventuali errori.