Skeleton loading per contenuti
Segnaposto animato che anticipa la struttura dei contenuti in caricamento.
Quando si usa
Quando una lista di card, articoli o risultati viene caricata dopo l'apertura della pagina.
Perché si usa
Lo skeleton mostra la struttura attesa del contenuto e rende il caricamento percepito più ordinato rispetto a uno spazio vuoto.
Vantaggi principali
- Aspetto professionale
- Utente meno disorientato
- Animazione leggera e disattivabile
Anteprima del risultato
Il riquadro simula il contenuto in arrivo.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<div class="skeleton-card" aria-hidden="true">
<span class="skeleton-img"></span>
<span class="skeleton-line"></span>
<span class="skeleton-line short"></span>
</div>
<style>
.skeleton-card{max-width:320px;border:1px solid #d8e1ec;border-radius:14px;padding:16px;background:#fff}
.skeleton-img,.skeleton-line{display:block;border-radius:8px;background:linear-gradient(90deg,#edf2f7,#f8fafc,#edf2f7);background-size:200% 100%;animation:scheletro 1.2s linear infinite}
.skeleton-img{height:120px;margin-bottom:14px}
.skeleton-line{height:14px;margin:10px 0}
.skeleton-line.short{width:65%}
@keyframes scheletro{to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.skeleton-img,.skeleton-line{animation:none}}
</style>Da personalizzare: Dimensioni delle linee, numero di righe, colori e larghezza del contenitore.
Errore da evitare: Non lasciare lo skeleton visibile se il caricamento fallisce: mostra un messaggio di errore o un contenuto alternativo.