fin1te/dsv1.0.0
  1. ds
  2. Components
  3. Skeleton

Skeleton

Placeholder while content loads.

Code
<div aria-busy="true" aria-label="Loading post" style="max-width:32rem">
  <span class="skeleton title"></span>
  <span class="skeleton"></span>
  <span class="skeleton" style="width:85%"></span>
  <span class="skeleton block"></span>
</div>

Only for content that takes longer than about 300 ms and has a known shape. A slow shimmer, no colour. Static pages never need one.

ClassOnWhat it does
.skeletonspanA text line.
.title / .block.skeletonA heading line, or a 6rem block for a figure or image.

Accessibility

  • Put aria-busy="true" on the container and remove it when content arrives.