Generatore di Loader CSS
Generatore di loader CSS gratuito: dieci spinner di caricamento in CSS puro con controlli in tempo reale di dimensione, velocità, spessore e colore, e copia di HTML e CSS pronti da incollare.
Cosa crea il generatore di loader CSS?
Costruisce indicatori di caricamento animati in CSS puro: spinner, punti, barre, ondina, impulso, orbita, flip, onda, rimbalzo e anello sfumato. Ognuno è generato con dimensione, velocità, spessore e colore scelti, pronto da copiare come HTML più CSS.
I loader richiedono JavaScript o immagini?
No. Ogni loader è composto da semplici elementi HTML animati con keyframes CSS. Niente immagini, icon font, librerie o script a runtime: il blocco CSS da solo basta.
Come aggiungo un loader al mio sito?
Clicca un loader nella griglia, copia il blocco HTML nel punto in cui deve comparire e incolla il blocco CSS nel tuo foglio di stile. Il CSS è autonomo e include le regole @keyframes necessarie.
Cosa modificano i quattro parametri?
La dimensione regola larghezza e altezza di tutti i loader, la velocità cambia la durata dell'animazione, lo spessore agisce su bordi e larghezza delle barre, e il colore ripinta all'istante ogni elemento nella griglia e nel codice.
Perché il loader copiato non si anima?
La causa più comune è aver copiato solo le regole di classe senza il blocco @keyframes, o aver rinominato la classe nell'HTML ma non nel CSS. Copia entrambi i blocchi così come generati e non cambiare i nomi delle classi.
Le animazioni sono performanti?
Sì. Tutti i loader animano solo transform e opacity, proprietà che il browser compone sulla GPU senza innescare layout o repaint, quindi restano fluidi anche con più loader nella stessa pagina.
I loader sono accessibili?
Gli spinner sono decorazione visiva: i lettori di schermo beneficiano di un suggerimento testuale. Aggiungi un'etichetta nascosta come "Caricamento" accanto al loader, oppure applica aria-hidden="true" al loader e annuncia il progresso a parte.
Vengono inviati dati a un server?
No. Il generatore funziona interamente nel browser. Le tue impostazioni non lasciano mai la pagina e il codice generato viene assemblato localmente sul tuo dispositivo.
Come usare Generatore di Loader CSS
Il generatore di loader CSS costruisce indicatori di caricamento animati in CSS puro — niente immagini, niente JavaScript, nessuna dipendenza. Scegli uno dei dieci stili, regola dimensione, velocità, spessore e colore, poi copia l'HTML e il CSS generati direttamente nel tuo progetto.
- Regola i parametri globali con i quattro controlli: Dimensione imposta la cornice di ogni loader, Velocità cambia la durata dell'animazione, Spessore controlla bordi e larghezze delle barre, e Colore dipinge ogni elemento.
- Sfoglia la griglia: tutti e dieci i loader restano animati in tempo reale con le tue impostazioni attuali, così li confronti a colpo d'occhio. Clicca un loader per selezionarlo.
- Il pannello dei dettagli mostra il loader selezionato più grande, insieme al suo snippet HTML e al CSS corrispondente (incluse le @keyframes di cui ha bisogno).
- Premi Copia HTML o Copia CSS per inviare ogni blocco negli appunti. Il CSS è autosufficiente — incollalo nel tuo foglio di stile e metti l'HTML dove deve comparire il loader.
- Cambia qualsiasi parametro e la griglia, l'anteprima dei dettagli e entrambi i blocchi di codice si aggiornano all'istante.
Essendo CSS puro, i loader costano quasi niente in banda e restano nitidi su qualsiasi schermo. Abbina l'animazione a un'etichetta testuale per l'accessibilità ed evita durate sotto i 0,5 s circa: gli indicatori che lampeggiano troppo veloce allarmano più di quanto rassicurino.
Strumenti correlati
- Minificatore CSS Minificatore CSS online gratuito. Comprimi e ottimizza istantaneamente il codice CSS rimuovendo spazi, commenti e caratteri non necessari. Riduci le dimensioni del file per migliori prestazioni web.
- Abbellitore CSS Formatta e abbellisci il codice CSS istantaneamente. Converti CSS minificato in codice leggibile e ben indentato con opzioni personalizzabili.
- Generatore di Border Radius Generatore di border radius creativo gratuito online. Trascina 8 punti o scegli una forma blob per creare figure CSS organiche e copiare il codice all'istante.
- Convertitore Colore Convertitore colore online gratuito. Converti formati HEX, RGB, HSL, HSV istantaneamente con selettore visivo. 100% privato, funziona nel tuo browser.
- Generatore di Easing CSS Generatore online gratuito di easing CSS. Trascina i punti di controllo del cubic-bezier su una curva interattiva, scegli tra 18 preset, guarda una pallina in loop e copia la funzione di timing all'istante.
- Generatore Text Shadow CSS Generatore online gratuito di text-shadow CSS. Sovrapponi più livelli d'ombra con offset, sfocatura, colore e opacità, prova preset come Neon, 3D o Retro e copia il CSS all'istante.
- Generatore Clip Path CSS Generatore online gratuito di clip-path CSS. Crea forme polygon, circle, ellipse e inset con punti trascinabili, anteprima live e copia del codice CSS in un clic.
- Generatore di Border Radius CSS Generatore visuale di border-radius CSS. Regola ogni angolo indipendentemente con anteprima in tempo reale e copia il codice CSS istantaneamente.