ds
Components
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.

Class	On	What it does
`.skeleton`	span	A text line.
`.title / .block`	.skeleton	A heading line, or a 6rem block for a figure or image.
`.row`	.skeleton	Exactly one 24px row: a 12px bar with 6px above and below. Stack them where dense rows will land.

Rows

Code

<div aria-busy="true" style="max-width:20rem">
  <span class="skeleton row"></span>
  <span class="skeleton row" style="width:82%"></span>
  <span class="skeleton row" style="width:64%"></span>
</div>

.skeleton.row takes the height of a dense row, so a list that loads into it does not move. Use it in panes and sidebars instead of a spinner.

Accessibility

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