Skeleton
BetaBatch C. Gray shapes that stand in for content while it loads.
When to use
Use during the first load when you know the layout, so the page doesn't jump.
When not to use
Don't use when data is already on screen and refreshing; keep the data on screen.
Anatomy
- Shapes: text line, block or circle
- LoadingArea around them, which tells screen readers once
Variants
| Shape | Size |
|---|---|
| text (default) | 12px tall, full width. Set the width with a class. |
| block | 48px tall, full width. |
| circle | 32px. |
States
Loading: a slow 2 second pulse. With reduced motion turned on, the shapes stay still.