Spinner vs Progress Bar vs Skeleton
「加载中」的三种表达
数据在加载，我该怎么表示？
对比表
| Pattern | 能否量化 | 预览结构 | 适合等待 | 典型场景 |
|---|---|---|---|---|
| Spinner加载转圈 | 否 | 否 | 短（<1s） | 按钮内、小部件 |
| Progress Bar进度条 | 是（百分比） | 否 | 长且知道总量 | 上传、下载、安装 |
| Skeleton骨架屏 | 否（但暗示结构） | 是 | 中长（首次加载） | 列表、卡片、页面首屏 |
← 左右滑动查看完整表格
真实 Demo 对比
Spinner
加载转圈怎么判断：短等待的默认选择
Progress Bar
进度条已上传 0.0 MB / 8 MB0%
怎么判断：知道要多久/多少
Skeleton
骨架屏怎么判断：首次加载整个页面
选型决策
- 等待很短（点一下就回来）Spinner 或甚至不加
- 知道确切进度（上传到 40%）Progress Bar
- 在加载一个有固定结构的页面/列表Skeleton
- 等待可能超过 10 秒超过就加文案提示和「重试」
Skeleton 的最大优势是「在等的时候已经在告诉用户页面长什么样」，感知等待会变短。但记住加一个「最短显示 300ms」，否则数据秒回时 Skeleton 一闪而过反而更糟。