Spinner
表示局部区域正在处理。中文惯用名：加载中；仅紧邻内容的局部处理状态。设计文档原名：Spinner。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.spinner |
| 名称 | Spinner |
| 二级分类 | 反馈（feedback） |
| 用途 | 表示局部区域正在处理 |
| 描述 | 中文惯用名：加载中；仅紧邻内容的局部处理状态。设计文档原名：Spinner。 |
预览
静态结构：渲染为单个旋转图标 <svg data-slot="spinner" role="status" aria-label="Loading">（lucide Loader2Icon，animate-spin 纯 CSS 旋转，无原语依赖）；size 映射尺寸类：sm → size-3（12px）、default → size-4（16px）、lg → size-6（24px）。颜色继承当前文本色（currentColor），会随所在容器自动适配；无内建文案，需要说明时由调用方在旁侧渲染文本。
DSL 结构
{
"type": "Spinner",
"props": {
"size": "default"
}
}何时用
何时使用
- 紧邻内容的局部处理中指示：按钮内、输入框后、行内的加载图标，只表示「这里在处理」。
- 加载位置与范围明确（就在图标旁），无需遮挡任何内容、也不阻断周围交互。
- 作为无包裹内容时的独立加载指示：LoadingOverlay 无 children 时同样退化为 Spinner + 文案。
何时不用
- 需要覆盖页面或区块并阻断操作：使用 LoadingOverlay，二者不是可互换的视觉变体。
- 结构已知的加载占位：使用 Skeleton（减少布局跳动）。
- 有明确进度的长任务：使用 Progress（Spinner 不表达完成度）。
- 全局页面级加载 / 路由切换：Spinner 只做局部指示，不替代路由级加载方案。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| sm 小 | size-3（12px）旋转图标 | 按钮内、行内等紧凑位置 |
| default 默认 | size-4（16px）旋转图标 | 常规局部加载指示；size 缺省即 default |
| lg 大 | size-6（24px）旋转图标 | 区块中央、加载遮罩内的加载指示 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | `'sm' | 'default' | 'lg'` |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- Spinner 是局部指示器：不阻断交互、不遮挡内容；需要阻断时用 LoadingOverlay。
- 颜色继承 currentColor：放在按钮或弱化文案中会自动适配，不要写死颜色而破坏主题。
- 只表示「处理中」不表示进度：能估算完成度时改用 Progress。
- 长时间处理要配文案（「正在保存…」）或超时提示，只有转圈用户无法判断是否卡死。
- 同一屏内避免多个 Spinner 同时旋转（按钮内与区块遮罩同时出现），会制造「整页都在等」的错觉。
正例
- ✓ 按钮内加载：内联 size=sm 的 Spinner + 文案「提交中」，按钮置 disabled。
- ✓ 区块中央加载：size=lg 居中渲染，配合一行「正在加载数据…」。
- ✓ 输入框后置校验中：size=sm 紧贴输入框右侧，不遮蔽输入内容。
反例
- ✕ 用 Spinner 覆盖内容区块充当加载层（不阻断也不遮挡，应使用 LoadingOverlay）。
- ✕ 有明确百分比的长任务用 Spinner（应使用 Progress）。
- ✕ 首屏结构已知的加载用 Spinner 代替骨架（版式跳动更明显）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。