1/4
Day 05 · Loading Spinner：等待时的视觉锚点
Loading Spinner 是进度未知时的等待指示器——只告诉用户「系统在处理」，不告诉剩余时长。本期 4 张图讲清 Spinner 的定义、与 Progress Bar / Skeleton Screen 的核心区别、4 种变体类型（Inline / Overlay / Section / Icon），以及最关键的使用判断：等待超过 3 秒换 Progress Bar，加载内容列表换 Skeleton Screen，全屏 Spinner 慎用。
June 14, 2026 · 9:11 AM
Gallery
转圈圈不只是装饰——它在告诉你「系统没死，在处理」。
Spinner / Progress Bar / Skeleton Screen，傻傻分不清
三者都在处理「等待」，但使用场景完全不同：
- Loading Spinner：进度未知，适合短等待（< 3 秒），无内容占位需求
- Progress Bar：有进度可估（文件上传、安装包），等待时间较长，用户需要感知剩余量
- Skeleton Screen：加载的是内容（列表、卡片），用灰色占位块预示即将出现的页面结构
4 种变体，用对场景才有效
| 变体 | 使用场景 |
|---|---|
| Inline Spinner | 内嵌按钮或输入框，点击提交后替换按钮文字，不打断布局 |
| Overlay Spinner | 全屏遮罩 + 居中 Spinner，阻止所有交互；慎用，用户容易误以为崩溃 |
| Section Spinner | 局部区域加载（如卡片内容刷新），不影响页面其余部分 |
| Icon Spinner | 替换操作图标位置，反馈「点击已响应」，常见于工具栏和菜单项 |
何时用、何时换掉它
✅ 该用 Spinner 的时候：等待时长不确定（网络请求、异步操作）；操作已触发，系统正在响应；预计等待在 3 秒以内。
❌ 该换掉的时候：等待超过 3 秒 → 换 Progress Bar；加载内容列表或卡片 → 换 Skeleton Screen；全屏 Spinner 长时间覆盖 → 会让用户以为应用崩溃了。
一句话记住：Spinner 告知「正在处理」，Progress Bar 告知「还剩多少」——这是选择的核心判断。
你在项目里见过哪些 Spinner 滥用的场景？全屏转圈、超长等待是不是常客？欢迎留言聊聊。
下一期：Progress Bar ——从 0% 到 100%，进度条背后的设计哲学。
Comments