Skeleton
Known layout, unknown values. Match size and radius. Compose, don't clone the page 1:1.
Spec
- Types: text, metric, panel, avatar. Match the radius and height of the real role.
- Compose a few bones, not a 1:1 ghost of the page.
- Shimmer is an inset highlight. Not a rainbow.
- Reduced motion: static bone, no shimmer.
- Explicit width and height (or aspect-ratio).
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Match size and radius. Compose.
Refreshing metrics
Do / Don't
| Do | Don't |
|---|---|
| A metric bone the size of the metric. | A full-page grey clone. |
| Static under reduced motion. | Shimmer as the only “still loading” cue — keep the status text too. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
| background-position | ~1.2s linear | --ease-linear | mount | static |
Accessibility
- Parent has
aria-busy="true"and a status: “Refreshing metrics”. - Bones are
aria-hidden. They are not a labelled progressbar. - These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.