Spinner 加载Spinner · Dots
告诉人“正在处理,请稍等”。等待很短或无法估计进度时用;知道进度用 Progress,知道内容形状用 Skeleton。
两种样子
默认的 tail 是品牌加载器:一截画出来、甩一下、再收回去的小尾巴。ring 是普通的转圈,放在密集界面里更低调。
加载中加载中
尺寸
sm 20、md 28(默认)、lg 40,或像素值。颜色跟随强调色。
加载中加载中加载中加载中加载中加载中
Dots 圆点
三个依次弹跳的圆点,用于“对方正在输入”这类轻量的等待。
周屿周屿正在输入
配合操作
加载器按需出现在触发它的操作旁边。按钮自己的加载状态请直接用 Button 的 loading 属性。
规格
- 尾巴
- 描线 + 摆动 ±11° · 1.5s
- 圆点
- 依次弹跳 · 间隔 120ms
- 转圈
- 0.8s 线性一圈
- 减弱动效
- 尾巴不甩、圆点不跳,改成描线 / 透明度变化
接口
Spinner
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | 'tail' | 'ring' | 'tail' | tail:品牌加载器;ring:普通的转圈。 |
size | 'sm' | 'md' | 'lg' | number | 'md' | 20 / 28 / 40,或像素值。 |
label | string | '加载中' | 给读屏的文字。 |
Dots
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | '加载中' | 给读屏的文字。 |
无障碍
- 两者都是
role="status":出现时读屏会礼貌地读出 label(默认“加载中”),图形本身对读屏隐藏。 - 请把 label 写具体(“正在刷新数据”),尤其是一页里可能同时有多个加载器的时候。
- 不可聚焦,没有键盘操作。加载结束后把它卸载,并用文字或 Toast 说明结果。
- 减弱动效时不会完全静止:尾巴保留描线、圆点改成明暗交替,仍然看得出在加载。