Skeleton
ProAn animated placeholder that mimics the shape and layout of content while it loads. Reduces perceived wait time by showing the structure of the incoming UI. Available as rectangles, circles, and text lines. Used for cards, lists, avatars, and any content with a predictable layout.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Text | Horizontal bars mimicking text lines. | Use for paragraphs, headings, and any text content placeholders. |
| Circle | Circular skeleton for avatar and icon placeholders. | Use in place of avatars, profile pictures, and circular elements. |
| Rectangle | Rectangular skeleton for images, cards, and block elements. | Use for images, thumbnails, and card bodies. |
| Card |
Usage Guidelines
Do
Match the skeleton shape to the actual content layout as closely as possible.
Don't
Use skeletons for content that loads in under 300ms — it causes flicker.
Do
Use a subtle shimmer animation for visual feedback.
Don't
Show skeletons indefinitely — provide an error state for failed loads.
Do
Provide aria-busy="true" on the loading container and aria-label describing what is loading.
Don't
Use generic rectangle skeletons when the content structure is known.
Code
Design Tokens
Accessibility
- Set aria-busy="true" on the container while content is loading.
- Provide aria-label describing what is loading — "Loading user profile".
- Remove aria-busy and skeleton when content arrives.
- Avoid motion for users with prefers-reduced-motion preference.