Skip to content

role presentation

Skeleton draft v0.1.0

A placeholder shape that stands in for content while it loads.

A skeleton draws the outline of content that is not there yet: a line of text, an avatar, a card. Several skeletons laid out like the content they stand for tell people what is coming and where, with less jump than a spinner followed by the real content. A skeleton is invisible to assistive technology; the region that loads says so itself.

Playground

HTML 
<span
  class="ds-skeleton"
  data-shape="text"
  aria-hidden="true"
  style="--_width: 60%"
></span>