Skeleton
stable 0.8 kB<hk-skeleton>Placeholders shaped like the content they stand in for, so the layout does not shift when data lands. Three motions: a travelling sheen, a soft pulse, or none at all.
#loading#placeholder
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| loading | boolean | true | Shows placeholders; projects the real content when false. |
| motion | 'shimmer' | 'pulse' | 'none' | 'shimmer' | How the placeholder animates. |
| width / height | string | '100%' / '1em' | Box size. Match the real element to avoid a shift. |
| radius | string | '0.375rem' | Corner radius. Use 50% for an avatar. |
| lines | number | 1 | Repeats the line primitive, tapering the last one. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-skeleton-base | #e8ecf1 | Placeholder fill. |
| --hk-skeleton-sheen | #f6f8fa | Colour of the travelling highlight. |
| --hk-skeleton-speed | 1.4s | Sweep duration. |
Accessibility
- The container is aria-busy while loading, so assistive tech knows content is pending rather than missing.
- Placeholders are aria-hidden — a screen reader should hear "loading", not a dozen empty boxes.
- prefers-reduced-motion drops to the static box rather than a slowed-down animation.