Skeleton
Shimmer loading placeholders with 20+ preset layout variants — from simple text lines and shapes to full dashboard, product, calendar, and chat skeletons.
API
All inputs and configuration options for zyra-skeleton.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'text' | 'circle' | 'rect' | 'rounded' | 'avatar' | 'image' | 'button' | 'input' | 'card' | 'list' | 'article' | 'table' | 'chat' | 'dashboard' | 'video' | 'chart' | 'product' | 'profile' | 'calendar' | 'rect' | Skeleton shape or preset layout |
lines | number | 3 | Number of text lines (text and article variants) |
rows | number | 5 | Number of repeated rows (list and table variants) |
width | string | '' | CSS width override (e.g. "120px", "60%") |
height | string | '' | CSS height override |
animated | boolean | true | Enable/disable the shimmer animation |
Tokens
CSS custom properties zyra-skeleton reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Base fill--zyra-color-surface-inset | var(--zyra-color-bg-surface) | Base fill color of every shape, and the shimmer gradient's start/end stop. |
Shimmer highlight--zyra-color-surface-raised | var(--zyra-color-bg-raised) | Bright midpoint of the animated shimmer sweep. |
Icon watermark--zyra-color-foreground-subtle | var(--zyra-color-text-dim) | Color of the subtle icon watermark in the image variant. |
Border--zyra-color-border-color | var(--zyra-color-border) | Border color used by frame-style variants (video, chart, calendar, product, etc). |
Strong border--zyra-color-border-strong-color | var(--zyra-color-border-strong) | Heavier border/divider color used inside compound layouts (e.g. table headers). |
Frame background--zyra-color-background-elevated | var(--zyra-color-bg-panel) | Background of card-style frames in compound layouts. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Skeleton is purely decorative — wrap in an aria-busy="true" container while loading
- Remove skeletons and announce content arrival with aria-live="polite"