Generatore di skeleton loading (CSS)
Scegli il modello e i colori. Lo skeleton imita la forma del contenuto in arrivo, il che fa sembrare l’attesa più breve di un’icona che gira.
Come si usaScheletro mentre la pagina si carica
Disponibile in: 
Generatore di skeleton loading (CSS): a cosa serve
Lo skeleton screen è lo scheletro grigio che appare al posto del contenuto mentre si carica, come su Facebook e YouTube. Mostra la forma di ciò che arriverà, fa sembrare l’attesa più breve ed evita che la pagina salti quando compare il contenuto.
Scegli il modello (card con immagine, lista con avatar, profilo o paragrafo), quante volte ripeterlo, i colori e gli angoli. Il luccichio animato sposta solo lo sfondo e si spegne per chi ha chiesto meno movimento, e il blocco usa aria-busy con un testo di caricamento per gli screen reader.
Come si usa
- Scegli il modello e quante volte ripeterlo.
- Regola colori, angoli e luccichio.
- Copia il codice e sostituiscilo con il contenuto quando arriva.
Quando usarlo
- Lista di prodotti caricata via API.
- Feed o lista di commenti.
- Pannelli e sistemi web.
Domande frequenti
Perché skeleton e non un’icona di caricamento?
Lo scheletro mostra la forma di ciò che apparirà, così la pagina non salta quando arriva il contenuto e l’attesa sembra più breve. Funziona meglio per card, liste e profili; per azioni rapide, come inviare un modulo, basta un indicatore nel pulsante stesso.
Com’è per chi usa lo screen reader?
Il blocco riceve aria-busy=true e un testo nascosto Caricamento; i rettangoli sono decorativi (aria-hidden). Quando arriva il contenuto, sostituisci lo scheletro con il contenuto e togli l’aria-busy.
Il luccichio animato pesa?
No: l’animazione sposta solo lo sfondo di ogni rettangolo. Per chi ha impostato il sistema per ridurre il movimento, il luccichio si spegne e resta solo il colore.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.