Skeleton
Loading placeholders for blocks, circles, and text lines.
Props
Skeleton
Skeleton extends HTMLAttributes<HTMLSpanElement>.
| Prop | Type | Default | Description |
|---|---|---|---|
w | CSSProperties['width'] | "100%" | Width of the placeholder. |
h | CSSProperties['height'] | 10 | Height of the placeholder. |
circle | boolean | — | Circular placeholder shape. |
rounded | keyof RadiusScale | — | Corner radius token. Ignored when circle. |
animation | SkeletonAnimation | "shimmer" | "shimmer" | "pulse" | "none". All three go static under prefers-reduced-motion. |
SkeletonText
SkeletonText extends HTMLAttributes<HTMLDivElement>.
| Prop | Type | Default | Description |
|---|---|---|---|
lines | number | 3 | Number of skeleton lines. |
lastWidth | CSSProperties['width'] | "55%" | Width of the final (shortest) line. |
animation | SkeletonAnimation | — | Animation for every line. |
Examples
Rectangle blocks
Circle (avatar placeholder)
Text skeleton
import { Skeleton, SkeletonText } from "@solarius/onset";
<Skeleton w="100%" h={12} />
<Skeleton w={36} h={36} circle />
<SkeletonText lines={4} lastWidth="45%" />