Generatore loader CSS
Crea animazioni di caricamento CSS personalizzate.
<div class="loader"></div>.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #D94F30;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Generatore di animazioni di caricamento CSS pure
Le animazioni di caricamento (loader o spinner) sono elementi visuali essenziali in qualsiasi applicazione web moderna. Indicano all'utente che il sistema sta elaborando una richiesta, migliorando l'esperienza utente fornendo feedback visivo durante le attese. I loader CSS puri sono particolarmente vantaggiosi perché non richiedono JavaScript, immagini né librerie esterne, rendendoli estremamente leggeri e rapidi da caricare.
Il nostro generatore include otto tipi diversi di loader: spinner classico, punti con rimbalzo, barre equalizzatore, impulso espandibile, doppio rimbalzo, anello rotante, quadrato 3D e onde concentriche. Ciascuno può essere personalizzato regolando il colore (qualsiasi valore esadecimale), la dimensione (da 16 a 80 pixel) e la velocità dell'animazione (da 0,3 a 3 secondi per ciclo).
Il codice generato è CSS puro con animazioni @keyframes, senza dipendenze esterne. Puoi copiare sia l'HTML che il CSS separatamente o insieme, e incollarli direttamente nel tuo progetto. I loader sono completamente responsive e si vedono bene su qualsiasi dispositivo e risoluzione dello schermo.
Domande frequenti
Devo usare JavaScript per queste animazioni?
No. Tutti i loader sono creati con CSS puro usando @keyframes e proprietà di animazione. Non è necessario alcun JavaScript, il che li rende estremamente leggeri e performanti.
Posso cambiare il colore del loader?
Sì, usa il selettore di colori per scegliere qualsiasi colore. Il codice generato usa il colore selezionato in tutte le proprietà rilevanti (border-color, background-color, ecc.).
Come aggiungo il loader al mio progetto?
Copia il codice HTML e CSS generato e incollalo nel tuo progetto. L'HTML va dove vuoi mostrare il loader e il CSS nel tuo foglio di stile o in un tag <style>.