When to Use
- Replacing content while data is loading
- Reducing perceived wait time with visual placeholders
- Maintaining layout stability during async operations
Variants
| Variant | Dimensions | Shape | Use for |
|---|---|---|---|
title | 32px × full width | Rounded rect | Headings, large text |
body | 18px × full width | Rounded rect | Body text lines |
button | 40 × 160px | Rounded rect | CTA buttons |
avatar | 48 × 48px | Circle | User avatars, icons |
media | 240px × full width | Rounded rect | Images, videos, banners |
block | 160px × full width | Rounded rect | Cards, panels, generic areas |
Animation Modes
| Animation | Description | When to use |
|---|---|---|
shimmer | Light wave sweeps left → right (default) | General loading — provides clear motion signal |
pulse | Opacity breathes in and out | Subtle UIs, reduced-motion preference fallback |
none | Static, no animation | Static placeholders, manual control |
Reduced motion: Both
shimmerandpulserespectprefers-reduced-motion: reduce.
Best Practices
- Match skeleton shapes to the actual content layout
- Avoid mixing animation modes within the same loading state
- Use
noneanimation for static placeholders in design previews