跳到主要内容

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,或像素值。
labelstring'加载中'给读屏的文字。

Dots

属性类型默认值说明
labelstring'加载中'给读屏的文字。

无障碍

  • 两者都是 role="status":出现时读屏会礼貌地读出 label(默认“加载中”),图形本身对读屏隐藏。
  • 请把 label 写具体(“正在刷新数据”),尤其是一页里可能同时有多个加载器的时候。
  • 不可聚焦,没有键盘操作。加载结束后把它卸载,并用文字或 Toast 说明结果。
  • 减弱动效时不会完全静止:尾巴保留描线、圆点改成明暗交替,仍然看得出在加载。