Skeleton
骨架屏
Before the data arrives, lay out the future layout using grey blocks so the shape of the page is already on screen.
Live Demo
Actually clickableWhat you just saw:The grey avatar squares, title bars and image placeholders you see when you open a feed before it has finished loading — that is a skeleton screen.
What it actually is
The value of a skeleton is that it removes the sense of the page being assembled. Users see the shape of the content first and the content itself second, and perceived wait time drops noticeably. What makes it more sophisticated than a spinner is that it also communicates what this page is going to look like.
Anatomy · What it's made of
Block占位块
Corner radius identical to the real element
Shimmer微光扫过
Optional looping highlight animation
Layout Mirror布局镜像
Shapes correspond to the real content
Fade Out淡出
Skeleton disappears when the data arrives
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| First load of a page with a predictable structure | Yes |
| The wait is longer than 1 second | Yes |
| Users need to understand the page structure up front | Yes |
| Pagination loads more items (appended to the bottom of the list) | Yes |
| The structure is unpredictable (infinite scroll with unknown content) | No |
If the data comes back in 200ms, the skeleton flashing by is itself a distraction — enforce a minimum display time (say 300ms).
The skeleton shapes must match the real content exactly, otherwise users see the layout jump when it is replaced.
Similar Patterns
Don't mix these upSkeletonCurrent
骨架屏
Before the data arrives, lay out the future layout using grey blocks so the shape of the page is already on screen.
Spinner
加载转圈
A circle that keeps spinning to say "loading, please wait" — the simplest loading indicator, and the one most often overused.
In one line:Before the data arrives, lay out the future layout using grey blocks so the shape of the page is already on screen.
Spinner
加载转圈
A circle that keeps spinning to say "loading, please wait" — the simplest loading indicator, and the one most often overused.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
Empty State
空状态
The block you show when a list is completely empty — it should explain why it is empty and what to do next.
Skeleton
骨架屏
Before the data arrives, lay out the future layout using grey blocks so the shape of the page is already on screen.
How to tell AI
Three levels of promptAdd the component name and specifics
Use a skeleton for the loading list: show six grey placeholder blocks matching the height of the real cards, with a shimmer sweeping across, and fade them out into the real content when the data arrives.
Don't just say this to AI
Bad → BetterDon't say this to AI
Show grey placeholder blocks while loading.
Say this instead
Use a skeleton for the loading list: placeholder blocks sized exactly like the real cards (text lines simulating 60%/40% widths), light grey background with a 1.5s shimmer sweep, fading out when data arrives, a "minimum 300ms display" guard for fast loads, and no shimmer under reduced-motion.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.