Skeleton
You might say
While the page is loading, show gray placeholder blocks instead of a spinner the whole time.
Reserve the layout while content is loadingA skeleton roughly matches the shape of incoming content so the page stays stable during a short load. It should not be a detailed gray copy of every element. For a tiny action or an unknown layout, a simpler loading indicator may be clearer.
When to use it
- Initial card or list loading
- Profile content with a known shape
- A page where layout stability matters
- Short waits before real content appears
When NOT to use it
- Show a skeleton for a task with no known layoutLoading, please wait…
- Keep it running after a request failed📎 design-file.sketch66%
- Animate a complex placeholder that distracts from the page
- Use it to hide a consistently slow experience
Anatomy
A set of placeholder color blocks, the shapes aligned with the real layout
Circle or square, corresponding to the media position
short, thick line
Long and short gray bars, imitating paragraphs
Variants
List Item
Place space when loading information flow and message list
Paragraph
The long article details page is loaded, first lay out the paragraph shape
Card
Pictures and cover cards occupy space before loading
Typical use cases
Article feed
Profile page
Dashboard cards
Search results