Skeleton
Placeholder blocks shown while content is loading, reducing user wait anxiety.
Basic Usage
variant supports text, circle, rect, and card types.
Text
Circle
Rect
Card
vue
<ASkeleton variant="text" :rows="3" />
<ASkeleton variant="circle" width="48px" height="48px" />
<ASkeleton variant="rect" width="100%" height="120px" />
<ASkeleton variant="card" :rows="2" width="300px" />Disable Animation
Set :animated="false" to disable the shimmer animation.
vue
<ASkeleton variant="card" :animated="false" width="300px" />API
Props
| Name | Type | Default | Description |
|---|---|---|---|
animated | boolean | true | Show shimmer animation |
variant | 'text' | 'circle' | 'rect' | 'card' | 'text' | Skeleton type |
width | string | — | Width |
height | string | — | Height (circle / rect only) |
rows | number | 3 | Rows (text / card only) |
Interaction
- Shows shimmer sweep animation by default
- Animation disabled with
prefers-reduced-motion