Crea bellissimi caricatori CSS

Genera animazioni di caricamento CSS personalizzate in pochi secondi con la nostra intuitiva interfaccia drag-and-drop. Non è richiesta alcuna codifica!

Personalizza il tuo caricatore

Tipo di caricatore

Color

Size 40px

Speed 1s

Opzioni avanzate

Preview

.loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #165DFF; width: 40px; height: 40px; animation: spin 1s linear infinite; }  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

Come si usa

Personalizza il tuo caricatore utilizzando i controlli a sinistra
Fare clic sul pulsante "Genera CSS"
Copia il codice HTML e CSS generato
Incollalo nel tuo progetto

Esempi popolari di caricatori

Caricatore a impulsi

3 Dots Facile da implementare

Caricatore rotante

Classic 100% CSS

Dual Ring

Doppio cerchio Stile moderno

Caricatore di rimbalzo

Punti rimbalzanti Animazione fluida

Caricatore ad anello

Anello con Dot Design unico

Caricatore di bilance

Scalare i punti Lightweight

Come utilizzare i caricatori CSS

Implementazione di base

L'utilizzo dei caricatori CSS generati da questo strumento è semplice. È sufficiente copiare il codice HTML e CSS generato nel progetto.

Passaggio 1: aggiungi il CSS

Add the generated CSS code to your stylesheet or in a