加载指示器

Web需自己实现

Web 原生没有这个

Web 没有画环形忙碌动画的原生元素。`<progress>` 渲染出来是一条轨道，不是转圈；它的不定量状态也仍然是条形。转圈要用 CSS 动画或 SVG 自己画。

通常怎么做：用 CSS 关键帧转一个圆环。无障碍上有两件相关但不同的事，按需要取用：有需要播报的状态文字时，把那块区域标成 role="status"（官方定义是「一个包含对用户的提示性信息、但重要性不足以成为 alert 的实时区域」，隐含 aria-live=polite）；某个区域正在异步更新时，对该区域设 aria-busy="true"（官方定义是「指示某个元素当前正在被修改」），并在完成后恢复为 false。具体页面可能两者都用，也可能只需要其中一个 —— 但它们不是二选一的替代关系。

适用范围：桌面与移动端主流浏览器

社区一般叫它 Spinner · Loader

表示程序正在处理的忙碌动效 —— 环形、旋转，或其他不沿轨道延展的形状动画。

转圈
菊花
转圈圈
小圆圈转啊转
加载指示器
活动指示器
进度指示器
转圈动画

其他平台的相似实现

iOS原生支持

Activity Indicator本平台没有对应叫法

官方把不定量的那种直接命名为活动指示器：「An indeterminate progress indicator — also called an activity indicator — uses an animated image to indicate progress」，并说明「所有平台都支持一个看起来在旋转的圆形图像」。

看 iOS 视角 →

Android原生支持

Circular Progress Indicator本平台没有对应叫法

Material 把进度指示器明确分成「linear and circular」两个变体，环形那个（CircularProgressIndicator）归这里。

看 Android 视角 →

使用规范

什么时候用

操作耗时超过约 1 秒，需要告诉用户系统没死
版面窄、放不下一条横轨道，只能用一个环形占位时

什么时候别用

耗时极短（不到半秒）→ 别显示，闪一下反而更烦
首屏内容加载 → 优先用骨架屏，感知上更快
已经知道进度却仍然只转圈 —— 有数值就把它显示出来，别让人干等

容易混淆

骨架屏

Loading Indicator 只表示系统正在处理；Skeleton 会用占位块预示即将出现的内容结构。

进度条

加载指示器不沿轨道延展 —— 它是环形、旋转或其他形状动效；进度条是沿一条轨道延展的形态。

Web 出处

查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例。