Skeleton Generator
Créez des écrans de chargement skeleton CSS avec animations shimmer et pulse. Choisissez un preset et copiez HTML + CSS.
① Choisissez un preset de layout ② Choisissez animation et couleurs ③ Copiez CSS et 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>Que sont les écrans skeleton et pourquoi les utiliser?
Les écrans skeleton sont des espaces réservés UI qui imitent la structure du contenu pendant le chargement. Ils améliorent considérablement la performance perçue. L'animation shimmer applique un dégradé mobile de gauche à droite via background-position. Le pulse utilise une animation opacity pour créer un effet de respiration. La technique clé est une classe .sk-bone combinée avec border-radius.
Questions fréquentes
Un écran skeleton est un espace réservé UI qui réplique la mise en page du contenu réel avant son chargement. Il utilise des formes simplifiées en couleurs atténuées.
L'effet shimmer applique un dégradé linéaire, puis anime background-position de -200% à 200% horizontalement, créant l'illusion d'une lumière balayant l'élément.
Shimmer est plus sophistiqué et communique un chargement actif. Pulse est plus simple et fonctionne mieux avec des mises en page complexes ou des thèmes sombres.
Copiez la structure HTML générée et remplacez chaque div .sk-bone par vos éléments de contenu réels.
L'approche standard est de rendre conditionnellement le skeleton ou le contenu réel en fonction d'une variable d'état de chargement.
Oui. Appliquez sk-shimmer ou sk-pulse sélectivement à des os spécifiques pour une variété visuelle.
Oui, ils sont particulièrement efficaces sur mobile où la latence réseau est plus élevée.