这叫啥 UI？
← 返回组件目录

COMPONENT 44 · Feedback & Status

加载指示器

Spinner

也叫Activity IndicatorThrobberLoading SpinnerNSProgressIndicator spinning

用循环动画表示正在处理但无法估算完成时间。

Uses a looping animation to show work in progress when completion cannot be estimated.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 旋转图形
  • 状态文字
  • 状态容器

适合使用

  • 等待超过瞬间且无法提供确定进度时。

不建议使用

  • 可计算进度、加载很慢且需要骨架布局时。

键盘与无障碍

  • 动画图形设为 aria-hidden，旁边提供 role=status 的文字；支持减少动态偏好。

DESCRIBE IT TO AI

这样告诉编程助手

实现加载指示器（Spinner）：用循环动画表示正在处理但无法估算完成时间。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<div class="demo" role="status" aria-live="polite">
  <span class="loader" aria-hidden="true">
  </span>
  <span>正在加载…</span>
</div>