Loaders
Skeleton Loader
Content-shaped placeholders that stand in while data loads.
#skeleton#shimmer#placeholder
6 frameworksBeginner
Loading…
A media card’s placeholder - cover, title, body, byline.
<!--
A media card's skeleton, not a generic one: cover block, title, two body lines,
footer row. The shapes are copied from the loaded card on purpose - a skeleton
whose proportions don't match the real thing produces a visible jolt at swap
time, which is worse than showing nothing at all.
The cover block reserves its aspect ratio (16/9) rather than a fixed height, so
the swap is stable at every width.
One role="status" for the card. The bars are aria-hidden - a screen reader
reading out nine anonymous placeholders is noise, not progress.
-->
<div class="sk-card" role="status">
<span class="sk-card__label">Loading card…</span>
<div class="sk-card__cover" aria-hidden="true"></div>
<div class="sk-card__body" aria-hidden="true">
<div class="sk-card__bar sk-card__bar--title"></div>
<div class="sk-card__bar"></div>
<div class="sk-card__bar sk-card__bar--short"></div>
<div class="sk-card__footer">
<div class="sk-card__avatar"></div>
<div class="sk-card__bar sk-card__bar--name"></div>
</div>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
label | string | 'Loading card…' | Accessible label announced while loading. |
className | string | - | Additional classes merged onto the root element. |
Copy the proportions of the card it replaces, not a generic set of bars: a skeleton whose shape differs from the loaded layout produces a visible jolt at swap time, which is worse than showing nothing. The cover reserves an aspect ratio rather than a fixed height, so the swap stays stable at every width. One role="status" for the card and aria-hidden on every bar - a screen reader reading out nine anonymous placeholders is noise, not progress.