Progressalternative
Use Progress for determinate loadingSkeleton
Placeholder loading state for content
Setup
import { Skeleton } from '@fragments-sdk/ui';Examples
Default
Basic rectangle skeleton
Loading preview...
Text Lines
Multi-line text placeholder
Loading preview...
Semantic Variants
Pre-configured shapes for common elements
Loading preview...
Avatar Skeleton
Circular placeholder for avatars
Loading preview...
Card Skeleton
Composed skeleton for a card layout
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | enumtextheadingavatarbuttoninputrect | rect | Semantic variant that auto-sizes |
size | enumsmmdlg | md | Size for avatar/button variants |
width | union | Not set | Custom width (string or number) |
height | union | Not set | Custom height (string or number) |
fill | boolean | false | Fill parent container |
radius | enumsmmdlgnonefull | Not set | Border radius override |
static | boolean | false | Disable skeleton animation |
Usage Guidelines
When to use
- Content is loading asynchronously
- Preventing layout shift during data fetching
- Providing visual feedback that content is coming
- Improving perceived performance
When not to use
- Short loading times (< 300ms)
- When spinner is more appropriate
- Background operations without visible impact
Best practices
- Match skeleton shape to expected content
- Use semantic variants (text, heading, avatar) for consistency
- Maintain similar dimensions to loaded content
- Avoid too many skeleton elements - simplify complex layouts
- Skeleton and Skeleton.Text forward DOM props (id, aria-*, data-*, handlers)
Accessibility
- Skeletons are decorative - use aria-hidden
- Announce loading state separately if needed
- Ensure sufficient contrast for the animation