Skeleton
Animated loading placeholder that mirrors the shape of pending content
Category: display · WCAG 2.2-AA · loading, placeholder, shimmer
Variants
- text
- circle
- rect
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'text' | 'circle' | 'rect' | text | Selects the visual style variant. |
width | string | — | CSS length applied as an inline custom property |
height | string | — | CSS length applied as an inline custom property |
lines | number | 1 | Number of bars for the text variant; the last bar renders shorter |
Design tokens
--cascivo-color-border--cascivo-color-bg-subtle--cascivo-radius-sm--cascivo-radius-full--cascivo-radius-component
When to use
- Indicating loading by mirroring the shape of the content that will appear
- Reducing layout shift while data for a known structure is fetching
- Loading larger content regions where shape preview reassures the user
When not to use
- Indeterminate work with no known content shape — use Spinner
- A view that is empty rather than loading — use EmptyState
How to build an accessible Skeleton in React →
Examples
Text
<Skeleton lines={3} />Avatar
<Skeleton variant="circle" width="3rem" height="3rem" />Image
<Skeleton variant="rect" height="12rem" />Related components
- Spinner — Spinner suits indeterminate work with no content shape to preview
- EmptyState — Use EmptyState when the result is empty, not loading