Skeleton
Softly pulsing grey blocks that stand in for loading content. Match the shape of the real content so the page does not jump when data arrives.
Grey blocks where the content will be
Set width / height to match the content
that will replace it. Use data-variant="circle" for a
circle.
<div class="stack" data-direction="row" aria-hidden="true">
<span class="skeleton" data-variant="circle"></span>
<div class="stack" data-gap="sm">
<span class="skeleton" style="width: 15rem"></span>
<span class="skeleton" style="width: 12rem"></span>
</div>
</div>In a card
Add aria-busy="true" and an
aria-label to the card while it loads.
<article class="card" aria-busy="true" aria-label="Loading order">
<header>
<span class="skeleton" style="width: 10rem"></span>
</header>
<div class="stack" data-gap="sm">
<span class="skeleton"></span>
<span class="skeleton" style="width: 80%"></span>
<span class="skeleton" style="width: 60%"></span>
</div>
</article>One line
Stands in for a single line of text, such as a customer name in a table.
<span class="skeleton" style="width: 10rem" aria-hidden="true"></span>Attributes
| Attribute / element | Values | Description |
|---|---|---|
.skeleton |
Block, 1em tall, full width, neutral fill, 4px corners.
Pulses every 1.5s (2.5s with reduced motion). Set
width / height yourself.
|
|
data-variant |
circle (omit for a block) |
40px circle for avatars. Does not shrink in flex. |
aria-hidden |
true |
On a skeleton or skeleton group that carries no meaning. |
aria-busy |
true |
On the loading container, with an
aria-label. Remove it once the content
arrives.
|