Skeleton
A loading placeholder that pulses on the compositor and holds still under reduced motion.
Examples
Text lines
Show code
<Skeleton width="60%" height="1rem" />Circle
Show code
<Skeleton circle width="3rem" height="3rem" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | string | "100%" | CSS width, e.g. 200px or 50%. |
height | string | "1rem" | CSS height. |
circle | boolean | false | A circle instead of a rounded bar. |
The placeholder is aria-hidden; announce the loading state on a
parent (a role="status" region or a Spinner).