Skeleton

A .skeleton is an empty block in the shape of the content it stands in for, with a shimmer passing across it. It holds the layout steady until the content arrives.

Use skeletons when you know the shape of what is coming, such as a list of messages or a profile header. For a short wait with no known layout, use a loading indicator. Reduced motion stops the shimmer and keeps the shapes.

<p class="visually-hidden" role="status">Loading messages</p>
<div class="flex gap-4" aria-busy="true">
  <div class="skeleton circle"></div>
  <div class="flex-1">
    <div class="skeleton text"></div>
    <div class="skeleton text"></div>
  </div>
</div>

Shapes

The default box takes its size from width and height. text is one line of body text, and the last of several lines runs shorter. circle is a 40px circle for an avatar. Change its size with --md-comp-skeleton-circle-size.

<div class="skeleton" style="height: 160px"></div>
<div class="skeleton text"></div>
<div class="skeleton text"></div>
<div class="skeleton text"></div>

Accessibility

Skeletons say nothing to assistive technology, so keep them empty. Then announce the wait another way:

1. Mark the region being filled with aria-busy="true".
2. Report the wait in a status, either a loading indicator or visually hidden role="status" text placed in the page before it is needed.
3. Swap in the content and remove aria-busy in the same update.

Tokens

Override these on the .skeleton, or on a parent to change a group.