反馈
Spinner
系统唯一的“正在处理”指示——一个环，永远不是流光。
什么时候用它
短到不必交代“接下来是什么形状”的等待。再长一点，就该用 Skeleton。
示例
sizes
Loading, smallLoading, mediumLoading, large
on a filled ground
Indexing 1,204 frames
说明
这套系统唯一的“正在处理”指示。
一个圆环，不是模糊的光晕，也不是流光：白色重置没有光源，所以深度和柔化这两样它都用不了。领先的那四分之一是唯一让这个环区别于一个普通圆圈的东西，这也是为什么轨道保持细线——spinner 是“时间在过去”的提示，不是页面的一个功能。
它只在 motion-safe 下转。一个要求减少动效的读者拿到的是静止的环，而它依然读作“还没完”，因为领先那四分之一比轨道更深。
当等待长到读者会开始怀疑页面是不是坏了的时候，优先用 Skeleton——一个描述“将要出现什么”的形状，胜过一个什么都不描述的点。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label | string | null | 'Loading' | 播报给辅助技术。传具体在等什么（“正在加载项目”），别传那个泛泛的词——读屏用户听到三次“加载中”，分不清是哪三件事。 当 spinner 所在的控件自己已经说明了这个操作时（比如一个标签变成“保存中…”的按钮），传 `null`，免得同一件事被念两遍。 |
| size | 'sm' | 'md' | 'lg' | 'md' | 14px / 18px / 26px。跟旁边的文字取同一个量级。 |
| tone | 'default' | 'current' | 'default' | `default` 把环画在页面上——线色的细线轨道加墨色的领先四分之一。`current` 用继承来的文字颜色画，这正是填充按钮里的 spinner 需要的：在墨色底上，一个墨色的环是看不见的。 |
同时接受 HTMLAttributes<HTMLSpanElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。
无障碍
- label 要写明在等什么；三个都写“Loading”的转圈对读屏用户等于什么都没说。
- label={null} 让它闭嘴，用在本身已经会播报操作的控件里。
- 只在 motion-safe 下旋转；静止时前四分之一仍然更深，所以照样读作“还没完”。