feedback
Skeleton
Loading placeholder with pulse animation. Supports text (single or multi-line), circular, and rectangular shapes.
Import
import { Skeleton } from '@stella-ds/react'Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'text' | 'circular' | 'rectangular' | 'text' | Shape of placeholder |
| width | string | number | undefined | CSS width |
| height | string | number | undefined | CSS height |
| lines | number | 1 | Number of text lines (text variant only) |
| animate | boolean | true | Pulse animation |
Preview
Examples
Multi-line text
<Skeleton variant="text" lines={3} />
<Skeleton variant="circular" width={40} height={40} />
<Skeleton variant="rectangular" width="100%" height={120} />