Skeleton Loading
骨架屏
Aliases:Skeleton骨架加载内容占位灰色占位加载占位图shimmer 占位
What is it
Grey placeholder blocks that mirror the real content structure while loading, usually with a subtle shimmer or pulse. It tells users "content is coming and it will look like this" instead of a blank page or a bare spinner.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Content structure is stable and predictable
- Expected load time is 1–3 seconds
- Lists and card feeds with repeating structures
✕ When not to use
- Very fast loads (< 300ms) — the skeleton itself becomes flicker
- Unpredictable content — placeholders that wildly mismatch the result
- Background operations with unchanged layout — prefer progress or button state
Variants
Static
静态占位
Plain grey blocks, most restrained
Pulse
呼吸
Slow opacity oscillation
Shimmer
微光扫过
A highlight sweeping across, iOS-style
Implementation
backgroundanimationbackground-clip: textlinear-gradientShape placeholders with border-radius; shimmer is a gradient highlight layer animated via background-position or a translated pseudo-element; pulse animates opacity. Match placeholder size to real content to avoid layout shift on load.
Compare
Full comparison →| Skeleton Loading骨架屏 | Progress Bar进度条 | Loading Spinner加载指示器 | |
|---|---|---|---|
| Interruption | Low — layout unchanged | Low — inline, hides nothing | Low — minimal footprint |
| Information volume | Low — structure only | Medium — shows proportion remaining | Low — busyness only |
| Suitable duration | 1–3 seconds | 3+ seconds, determinate | 1–5 seconds |
| Result consistency | High | High — must reflect real progress | Low — no shape of the result |
Related concepts
A continuously rotating ring or dots that says "work in progress". Tiny in footprint and universally understood, it fits inside buttons, cursors or small regions as lightweight feedback. It communicates busyness only — neither progress amount nor time remaining.
MotionAlternativeA loading indicator where a horizontal bar fills left to right to express task completion, usually with a percentage or step label. For determinate tasks with predictable duration: uploads, downloads, installs and multi-step forms.
ComponentsAlternativeUpdate the interface immediately as if the operation will succeed while the real request runs in the background; settle on success, roll back to the original state with a notice on failure. It solves the "wait for the server on every action" problem — trading brief uncertainty for a zero-latency feel, ideal for frequent light actions like likes and bookmarks.
PatternsSimilarDefers loading of off-viewport resources: images, list chunks and components are fetched and rendered only when they approach or enter the viewport. The first screen pays only for what is visible, with placeholders preventing layout jumps as content streams in.
PatternsSimilarWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsSimilar