Feedback
Skeleton
A placeholder shape while content loads.
Live example
Loading trip
Usage
<div aria-busy="true">
<VisuallyHidden>Loading bookings</VisuallyHidden>
<Skeleton lines={3} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
shape? | 'text' | 'rect' | 'circle' | 'text' | Placeholder shape. |
lines? | number | 1 | Text lines; the last is shorter. |
width? | string | number | none | CSS width. |
height? | string | number | none | CSS height. |
Do and don't
Do
- Match the shape of the content that will replace it.
- Set aria-busy on the loading container and give it a text status.
Don't
- Show skeletons for content that loads in under about 300 ms.
Accessibility
- Hidden from assistive technology with aria-hidden.
- Shimmer animation stops under prefers-reduced-motion and the site motion setting.
No keyboard interaction of its own; it contains whatever controls you put inside.