Skeleton Screen

A skeleton screen is a lightweight placeholder that mimics the layout of a page or component, typically with grey blocks where text, images and buttons will appear, while the real data loads. It is replaced by the actual content when ready.

Why it matters

Blank screens and spinners make waits feel longer and give no sense of what is coming. A skeleton shows structure immediately, which improves perceived performance. Because it reserves space with the same dimensions as the final content, it also prevents layout shift when the data arrives, helping Cumulative Layout Shift. It does not make the data arrive faster, so slow back ends still need fixing.

Example

<div class="card skeleton" aria-busy="true">
  <div class="line w-60"></div>
  <div class="line w-90"></div>
  <div class="line w-40"></div>
</div>

.skeleton .line {
  height: 1rem; margin: .5rem 0; border-radius: 4px;
  background: linear-gradient(90deg, #eee 25%, #f7f7f7 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

Common mistakes

• Skeleton dimensions that differ from real content, causing a jump.
• Showing one for very fast loads, creating a flash.
• Forgetting accessibility: announce loading state with aria-busy.

Related

• Core Web Vitals
• Lazy loading
• CSS animation
• Single-page application

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.