Spinner vs Progress Bar vs Skeleton
Three ways to say "loading"
Data is loading. How should I show it?
Comparison table
| Pattern | Quantifiable | Previews structure | Good for waits | Typical use |
|---|---|---|---|---|
| Spinner加载转圈 | No | No | Short (<1s) | Inside buttons, small widgets |
| Progress Bar进度条 | Yes (percentage) | No | Long, with a known total | Upload, download, install |
| Skeleton骨架屏 | No (but implies structure) | Yes | Medium to long (first load) | Lists, cards, above-the-fold |
← Swipe to see the full table
The demos, side by side
Spinner
加载转圈How to decide: The default for short waits
Progress Bar
进度条0.0 MB / 8 MB uploaded0%
How to decide: When you know how much is left
Skeleton
骨架屏How to decide: The first load of a whole page
Decision rule
- the wait is very short (one tap and it is back)use a Spinner, or nothing at all
- you know the exact progress (upload at 40%)use a Progress Bar
- you are loading a page or list with a predictable structureuse a Skeleton
- the wait might exceed 10 secondsadd explanatory copy and a retry action
A Skeleton's advantage is that it shows the page's shape while people wait, so perceived waiting shrinks. Still hold it for 300ms minimum, or a fast response makes it flash and feel worse.