# Skeleton

> Placeholder shapes that hold the layout while content loads.

## Anatomy

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](/loading-indicator.html.md). 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.

| Token | Default |
| --- | --- |
| `--md-comp-skeleton-color` | `--md-sys-color-surface-container-highest` |
| `--md-comp-skeleton-shimmer-color` | `--md-sys-color-surface` at 50% |
| `--md-comp-skeleton-shape` | 8px; `text`: 4px |
| `--md-comp-skeleton-circle-size` | 40px |