界面图鉴
加载指示Spinner
加载指示到底是什么？转圈的那个小图标，为什么不直接显示进度？
转圈的小图标，只说「正在等」、不说「还要多久」，适合几秒钟以内的等待。
01 · 拆开看看
这一块由什么组成
名字来自 spin——转个不停。它是最省事的等待提示：不知道要多久、也不承诺多久，只说一句「我还活着，别刷新」。零件很少：
转圈图形Ring
一个缺口的圆环在转，缺口是运动感的来源。
说明文字Label
可选的「加载中…」，告诉用户在等什么。
所在位置Host
它长在哪：按钮里、区域中央，还是盖住整页。
02 · 常见变体
同一个零件，几种摆法
点下去后按钮变「提交中」，同时禁用。
只有这一块在转，页面其他部分照常用。
半透明盖住全页，什么都不能点。
03 · 火眼金睛
这个页面里，哪一个是 Spinner？
四块都在「等」或「提示」，只有一个在转圈、什么也不承诺。
点一块试试，看看它叫什么
不是它。铃铛角上的数字是徽标——常驻计数，和等待无关。
不是它。骨架屏先按内容的形状画出灰块，是「内容马上来」的占位。
不是它。空状态是加载完了但确实没内容——等待已经结束。
就是它！一个转个不停的圈，只说「还在忙」，不说还要多久。
04 · 用与不用
什么时候该上它
- 几秒钟内就能结束的等待
- 点提交之后的「正在处理」
- 不知道总量、也没法算进度的请求
- 超过十秒的等待——用进度条
- 首屏内容加载——用骨架屏
- 每个小组件各转各的圈，满屏转圈
05 · 想一想
一道题，检查眼力
用户要上传一个 2GB 的视频，大概要一分钟。等待期间用什么提示？
一分钟盯着转圈，用户会怀疑卡死了然后刷新。超过几秒的等待，spinner 就不够用了。
对。总量已知、时间够长，就该告诉用户「还剩多少」，进度条正是干这个的。
骨架屏是给「即将显示的内容」占位，上传是把东西送出去，形状占位帮不上忙。
06 · 说给 AI 听
让 AI 改它时，这样说
说清放在哪、什么时候出现、什么时候消失——spinner 最常见的 bug 是转个不停。
点提交后按钮里显示一个 spinner，同时禁用按钮
列表加载时在区域中央放一个 spinner，别整页遮罩
请求超过 8 秒还没回来，就把 spinner 换成一句提示
全站用同一个 spinner 组件，别每处画一个
最容易踩的坑
Spinner 只能撑几秒。超过十秒还在转，用户会以为卡死了——要么换成进度条，要么给一句「大约需要一分钟」。还有：请求失败后一定要把它收掉，转圈加报错是最让人抓狂的组合。