Skeleton
A placeholder in the shape of the content while it loads, so the layout does not jump when the content arrives.
General
A line fills its container by default. Set the size with width and height.
Lines
Use lines for a paragraph. The last line is shorter, like real text.
Circle
Use circle for an avatar. It is as tall as it is wide unless height is set.
With content
Wrap the content and pass loading: the placeholder shows while it is true, and the content after.
APIs
Skeleton.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| width | width of the placeholder; a number is a multiple of the theme unit | string / number | '60%', '48px', ... | 100%, 2.5em for a circle |
| height | height of each line; a number is a multiple of the theme unit | string / number | '120px', ... | 1em, the width for a circle |
| lines | number of lines; the last one is shorter | number | - | 1 |
| circle | round shape, for avatars | boolean | - | false |
| loading | with children, shows the placeholder while true | boolean | - | true |
| ... | native props, passed to the root element | HTMLAttributes | 'id', 'className', ... | - |
Ref
The ref points at the root element of the placeholder. With children and loading={false}, the children render alone and the ref is not used.
Accessibility
The placeholder has aria-hidden, so screen readers skip it. When it wraps content, the wrapper has aria-busy="true" while loading. With prefers-reduced-motion, the shimmer stops and the shapes stay still.