Skeleton
Skeleton is a placeholder shown in the shape of content that is still loading. It is decorative and hidden from assistive tech (aria-hidden), so set aria-busy on the region it stands in for. Under prefers-reduced-motion it stays still.
Demos
Basic
text makes an inline line of text, 1em tall and on the text’s baseline; repeat renders several.
Shape
Corners follow the theme; sharp squares them, round rounds the ends, and circle takes width, then height, for both sides.
Size
size gives the height of a Button or Input of that size, so a placeholder takes the space of the control it stands in for.
Repeat
Loading card
Circles and text lines composed into the shape of a card.
Loading content
Swap each skeleton for the content once it arrives. The region carries aria-busy while loading.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
text | boolean | false | An inline line of text. | Unreleased |
round | boolean | false | Fully rounded ends. | Unreleased |
circle | boolean | false | A circle. | Unreleased |
sharp | boolean | false | Square corners instead of the theme’s radius. | Unreleased |
width | number | string | undefined | Width; a number is in px. Defaults to the full width. | Unreleased |
height | number | string | undefined | Height; a number is in px. Defaults to size’s height, or 1em. | Unreleased |
size | small | medium | large | undefined | Height of a control of that size. | Unreleased |
repeat | number | 1 | How many to render. Every copy gets the props; ref goes to the first. | Unreleased |
animated | boolean | true | Plays the loading animation. | Unreleased |
The corners follow the theme unless sharp is set.