Generatore CSS Loader
Genera animazioni di caricamento CSS puro all'istante. Scegli spinner, punti, barre o pulsazione — copia CSS e HTML e usali in qualsiasi progetto.
① Scegli un tipo di loader ② Regola dimensione, colore e velocità ③ Copia CSS e HTML
Colore
#C9B89A
Velocità
Come funziona
Ogni loader è costruito solo con animazioni CSS — niente JavaScript o immagini. Lo spinner usa la rotazione del bordo, i punti usano il bounce di scala, le barre usano scaleY, e il pulse usa scala con opacità.
Controllo velocità
Lento = 1.5s, Normale = 0.8s, Veloce = 0.4s di durata animazione. Punti e barre usano animation-delay sugli elementi figli per creare l'effetto sfalsato.
Pronto all'uso
Copia sia il CSS che lo snippet HTML, incollali nel tuo progetto e il loader funziona subito. Nessuna dipendenza, nessun framework richiesto.
Output CSS
.loader {
width: 48px;
height: 48px;
border: 6px solid #c9b89a33;
border-top-color: #c9b89a;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
Output HTML<div class="loader"></div>
Cos'è un'animazione di caricamento CSS?
Un'animazione di caricamento CSS — anche detta CSS spinner o CSS loader — è un pattern UI che indica dati in attesa o elaborazione senza richiedere JavaScript o GIF. Il CSS moderno abilita animazioni complesse usando @keyframes con transform, opacity e proprietà border. Pattern comuni includono spinner (bordo rotante), punti (cerchi saltellanti), barre (rettangoli scalanti) e pulse (cerchio respirante). I loader CSS puri non hanno overhead di runtime e sono compatibili con tutti i browser moderni.
Domande frequenti
Un CSS loader è un indicatore di caricamento visivo implementato con animazioni CSS e @keyframes — niente JavaScript o asset immagine richiesti. Indicano agli utenti che il contenuto viene caricato o elaborato.
Lo spinner usa un elemento circolare con un bordo trasparente tranne per un lato colorato. Un'animazione @keyframes rotate(360deg) ruota l'elemento continuamente, creando l'effetto spinner circolare.
Il loader a punti mostra tre cerchi che si scalano su e giù in sequenza usando la trasformazione scale(), creando un effetto rimbalzo. Il loader a barre mostra quattro rettangoli che si scalano verticalmente usando scaleY(), creando un effetto onda ritmico.
Per punti e barre, ogni elemento figlio ha un valore animation-delay diverso. Questo significa che ogni elemento inizia il suo ciclo di animazione in un momento diverso, creando l'aspetto a cascata anche se tutti gli elementi usano gli stessi @keyframes.
Le animazioni CSS che usano transform e opacity sono accelerate dalla GPU in tutti i browser moderni e hanno un impatto minimo sulle prestazioni. Evitare di animare proprietà come width, height o top/left che attivano il reflow del layout.
Avvolgi il loader in un contenitore con display:flex; justify-content:center; align-items:center; e impostane le dimensioni per coprire lo spazio desiderato. Per un overlay a pagina intera, aggiungi position:fixed; inset:0.
Le animazioni CSS @keyframes sono supportate in tutti i browser moderni (Chrome, Firefox, Safari, Edge) dal 2013. Non servono prefissi vendor per le animazioni usate in questo tool.