Skeleton Generator
Crea schermate di caricamento skeleton CSS con animazioni shimmer e pulse. Scegli un preset e copia HTML + CSS pronti.
① Scegli un preset di layout ② Scegli animazione e colori ③ Copia CSS e HTML
#2A2A2A
#3A3A3A
/* CSS */
.sk-bone {
background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
background-size: 200% 100%; animation: sk-shimmer 1.5s infinite;
border-radius: 4px;
}
.sk-img { width: 100%; height: 180px; border-radius: 8px; margin-bottom: 16px; }
.sk-line { height: 14px; margin-bottom: 10px; }
.sk-content { padding: 4px 0; }
.sk-card { max-width: 320px; }
.sk-list { display: flex; flex-direction: column; gap: 16px; }
.sk-list-item { display: flex; align-items: center; gap: 12px; }
.sk-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sk-lines { flex: 1; }
.sk-article { max-width: 560px; }
.sk-profile { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 240px; }
.sk-circle { width: 72px; height: 72px; border-radius: 50%; }
.sk-profile-info { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
@keyframes sk-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes sk-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
/* HTML */
<div class="sk-card">
<div class="sk-img sk-bone"></div>
<div class="sk-content">
<div class="sk-line sk-bone" style="width:60%"></div>
<div class="sk-line sk-bone" style="width:90%"></div>
<div class="sk-line sk-bone" style="width:75%"></div>
</div>
</div>Cosa sono le schermate skeleton e perché usarle?
Le schermate skeleton sono segnaposto UI che imitano la struttura del contenuto durante il caricamento. Migliorano significativamente la performance percepita. L'animazione shimmer applica un gradiente mobile da sinistra a destra via background-position. Il pulse usa un'animazione opacity per creare un effetto respiro. La tecnica chiave è una classe .sk-bone che applica l'animazione a qualsiasi elemento, combinata con border-radius per creare cerchi e rettangoli arrotondati.
Domande frequenti
Una schermata skeleton è un segnaposto UI che replica il layout del contenuto reale prima del caricamento. Usa forme semplificate (rettangoli e cerchi) in colori attenuati per comunicare la struttura in arrivo.
L'effetto shimmer applica un linear-gradient da trasparente a un colore più chiaro e poi di nuovo a trasparente, poi anima background-position da -200% a 200% orizzontalmente.
Shimmer è più sofisticato e comunica caricamento attivo. Pulse è più semplice e funziona meglio con layout complessi o temi scuri.
Copia la struttura HTML generata e sostituisci ogni div .sk-bone con i tuoi elementi di contenuto reale.
L'approccio standard è renderizzare condizionalmente lo skeleton o il contenuto reale in base a una variabile di stato di caricamento.
Sì. Applica sk-shimmer o sk-pulse selettivamente a specifiche ossa per varietà visiva.
Sì, sono particolarmente efficaci su mobile dove la latenza di rete è maggiore. Lo stesso CSS funziona su tutte le dimensioni dello schermo.