Spinner 加载指示器

为正在进行的等待提供有名称或纯装饰的轻量指示。

Beta

示例

直接操作示例，查看组件在具体任务中的状态与反馈。

交互示例 · 本地数据

Spinner 本地状态示例

展示有名称的等待状态与可复现的本地状态切换。

有意义的等待使用 status 名称；装饰性指示器不重复宣告邻近文字。
确定性状态切换
交互示例 · 本地数据

Spinner 装饰模式

邻近文字已表达等待状态时，装饰性旋转器不会重复播报。

邻近文字已表达等待状态时，装饰性旋转器不会重复播报。
内联等待
正在同步设置…
交互示例 · 本地数据

Spinner 按钮等待

按钮在提交期间保持动作标签、禁用重复操作，并使用装饰性指示器。

按钮在提交期间保持动作标签、禁用重复操作，并使用装饰性指示器。
提交状态

使用建议

等待状态必须有名称

独立 Spinner 使用明确 label 说明正在处理什么；默认中文只适合上下文已经足够清晰的通用等待。

邻近文字时避免重复宣告

如果父级 status 已经提供可见等待文本，将 Spinner 设为 decorative，避免辅助技术听到两次同义信息。

可计算进度使用 Progress

Spinner 适用于完成时间或比例未知的短暂等待；已有百分比时应使用 Progress 并呈现实际数值。

引入方式

从已验证的公开子路径导入组件；全局样式接入方式见安装指南。

import { BaseSpinner } from '@inf-monkeys-tech/monkeys-design/components/base';

当前限制

  • Spinner 只表达未知时长等待，不负责异步任务、超时、取消、失败恢复或减少动态效果策略。
  • T17 尚缺真实 Chromium hydration、focus、axe、visual 与 packed React 18/19 证据；Spinner 本身没有交互焦点，但仍未完成浏览器状态宣告与视觉闭环。
  • Automated axe checks and deterministic browser visual evidence are pending T17/T23.

API

查看组件源码
export type BaseSpinnerProps =
  | (BaseSpinnerSharedProps & {
      decorative: true;
      label?: never;
    })
  | (BaseSpinnerSharedProps & {
      decorative?: false;
      label?: string;
    });
属性说明类型默认值
appearance覆盖组件使用的外观令牌或局部样式配置。BaseAppearance—
className追加到组件根元素的 CSS 类名。string—
classNames按组件公开的结构插槽分别追加 CSS 类名。BaseSpinnerClassNames—
style追加到组件根元素的内联样式。CSSProperties—
decorative图标是否仅作装饰；为 true 时不会向辅助技术暴露状态。true | falsefalse
label加载指示器提供给辅助技术读取的状态文本。never | string—