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.
You can say this to an AI Agent
While article data is pending, show a skeleton matching the real image and title layout, then replace it in place. On failure, switch to an error and retry instead of keeping the skeleton. Confirm that content arrival causes no obvious layout jump.
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 pageThe actual content is a form, but the skeleton doesn’t match its layout
- Use it to hide a consistently slow experienceThe request failed, but the skeleton never changed to an error state
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Quick check