kit

Skeleton

Placeholders shaped like the content that's on its way, so the page doesn't jump when it arrives.

Tier 1 · CSS only Decorative placeholder preview

Example

Loading…

Show the markup 
<div class="demo-stack demo-fill" aria-busy="true">
  <div class="kit-skeleton-group" aria-hidden="true">
    <div class="demo-row demo-nowrap"><span class="kit-skeleton" data-shape="circle"></span><div class="kit-skeleton-group demo-grow"><span class="kit-skeleton" data-width="60"></span><span class="kit-skeleton" data-width="40"></span></div></div>
    <span class="kit-skeleton"></span>
    <span class="kit-skeleton" data-width="80"></span>
    <span class="kit-skeleton" data-shape="block"></span>
  </div>
  <p class="vh">Loading…</p>
</div>

Usage

Draw the outline of what's coming (an avatar and two lines, a chart block) and swap it for the real content when it loads. Size skeletons like the real thing; that's what keeps layout shift at zero.

Attribute Values Default
data-shape text, circle, block text
data-width 25, 40, 60, 80, 100 (per cent) 100

Accessibility

  • Skeletons are decoration: put aria-hidden="true" on the group.
  • Tell people something is loading another way: aria-busy="true" on the region being filled, and a visually hidden "Loading…" if it takes a while.
  • The shimmer stops for people who prefer reduced motion.