Generatore di loader CSS

Cos'è Generatore di loader CSS?

Il Generatore di Loader CSS è uno strumento gratuito nel browser per web designer e sviluppatori front-end che hanno bisogno di un indicatore di caricamento in CSS puro senza aggiungere una libreria. Scegli tra cinque stili - spinner, anello, puntini, barre e pulse - poi controlla la dimensione in pixel, il colore principale, la velocità di un ciclo di animazione in secondi, lo spessore del tratto e il numero di puntini o barre. Un'anteprima si anima mentre modifichi, e il markup HTML insieme a un blocco di stile CSS con @keyframes si aggiorna all'istante così puoi inserirlo direttamente in una pagina. Usalo per pulsanti, loader di pagina, stati skeleton e segnaposto asincroni, o per imparare come l'animazione CSS e @keyframes guidano ogni effetto.

Come usare Generatore di loader CSS

1. Scegli uno stile di loader: Spinner, Anello, Puntini, Barre o Pulse.
2. Imposta la dimensione in pixel e scegli un colore con il campione o digitando un valore.
3. Imposta la velocità dell'animazione in secondi per un ciclo completo.
4. Apri le Impostazioni per regolare lo spessore del tratto (spinner e anello) o il numero di puntini o barre.
5. Osserva l'animazione dell'anteprima dal vivo, poi copia l'HTML e il CSS generati con il pulsante di copia.

Esempi

Stile: Spinner, dimensione 48px, colore #4f86f7, velocità 1s, spessore 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Stile: Puntini, dimensione 48px, colore #9333ea, velocità 1s, quantità 3

<div class="dd-loader"><div></div><div></div><div></div></div> con animation-delay scaglionato così i puntini scalano a onda.

Domande frequenti

Quali stili di loader sono disponibili?

Cinque: Spinner (un arco che ruota), Anello (un anello rotante più spesso), Puntini (puntini che scalano a onda), Barre (barre che si allungano su e giù) e Pulse (un singolo cerchio che pulsa). Cambia con il menu degli stili e l'anteprima e il codice si aggiornano all'istante.

Cosa fanno i controlli di dimensione, colore e velocità?

La dimensione imposta le misure in pixel del loader, il colore imposta il colore principale (usa il selettore o digita qualsiasi colore CSS) e la velocità è la durata di un ciclo di animazione in secondi. Lo spessore controlla il tratto dello spinner e dell'anello, mentre la quantità controlla quanti puntini o barre compaiono.

Il CSS generato è CSS puro senza JavaScript?

Sì. Lo snippet è semplice HTML più un blocco <style> che usa animazione CSS e @keyframes, quindi funziona senza alcun JavaScript o libreria esterna. Incollalo nella tua pagina e funziona da solo.

Perché spessore e quantità non cambiano ogni stile?

Lo spessore influisce solo su spinner e anello (che disegnano un bordo), mentre la quantità influisce solo su puntini e barre (che rendono più elementi). Gli altri stili li ignorano, così l'output resta pulito per lo stile che hai scelto.

Viene caricato qualcosa su un server?

No. Il loader e il suo CSS vengono costruiti interamente nel tuo browser con calcolo locale di stringhe - nessuna impostazione, colore o codice viene mai inviato a un server, quindi funziona offline e mantiene il tuo lavoro privato.