In this article · 9 sections
When content loads from a server (search results, bookings, dashboards), a blank area or spinning icon makes users feel they're waiting. A skeleton loading screen shows grey placeholder shapes in the layout of the coming content. It feels faster and avoids layout jumps.
Basic skeleton CSS
.skeleton {
background: linear-gradient(90deg, #eef1f7 25%, #f7f9fc 37%, #eef1f7 63%);
background-size: 400% 100%;
animation: shimmer 1.4s ease infinite;
border-radius: 8px;
}
@keyframes shimmer {
0% { background-position: 100% 50%; }
100% { background-position: 0 50%; }
}
A card skeleton
<div class="card" aria-busy="true" aria-label="Loading">
<div class="skeleton" style="height:160px"></div>
<div class="skeleton" style="height:18px;width:70%;margin-top:14px"></div>
<div class="skeleton" style="height:14px;width:90%;margin-top:10px"></div>
<div class="skeleton" style="height:14px;width:60%;margin-top:8px"></div>
</div>
When data arrives, replace the skeleton with real content.
Match the final layout
Skeletons should have the same sizes as the final content, so nothing shifts when content appears. That protects your Cumulative Layout Shift score.
Where to use skeletons
- Search and filter results
- Dashboards and admin panels
- Product grids loaded via JavaScript
- Comment or review sections
- Profile and booking lists in apps
Where not to use them
- Server-rendered pages that load instantly. Just send the content
- Very short loads (under ~300ms), where a skeleton flash can feel jumpy. Delay showing it briefly
Accessibility
- Use
aria-busy="true"on the loading region - Announce completion for screen readers if content updates dynamically
- Respect reduced motion:
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
Images: blur-up and dominant colour
For images, a low-quality placeholder or dominant colour background (with fixed dimensions) works like a skeleton and prevents layout shift. See responsive images.
Skeletons don't fix slow backends
They improve perceived speed. If data takes several seconds, fix the real cause. See reduce server response time.
FAQs
Are skeletons better than spinners?
For content areas, usually yes. Spinners still suit small actions like button submits.
Do skeletons affect SEO?
Search engines need real content in the HTML; don't rely on skeletons for important content that only loads via JavaScript.
Joboo Web builds admin panels and apps with smooth loading states. Talk to us.