Skeleton Generator
Build CSS skeleton loading screens with shimmer and pulse animations. Choose a layout preset and copy clean HTML + CSS.
① Pick a layout preset ② Choose animation and colors ③ Copy the CSS and HTML
/* 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>What are skeleton loading screens and why use them?
Skeleton screens are UI placeholders that mimic the structure of content while it loads. They significantly improve perceived performance because users see a shaped placeholder immediately instead of a blank space or spinner. Research shows skeleton screens feel faster than equivalent spinners. Two main animations are used: shimmer applies a moving linear-gradient sweep from left to right via background-position animation — it communicates that something is actively loading. Pulse uses an opacity keyframe animation to create a breathing effect. The key technique is a .sk-bone class that applies the animation to any element, combined with border-radius to create circles (avatars) and rounded rectangles (text lines). Skeleton screens are standard in Facebook, YouTube, LinkedIn and most modern apps.