定价

Spinner

Figma 源代码

以持续旋转的视觉提示表示加载中，提供圆环、辐条和胶囊三种形式，适合按钮与内容区域。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于等待状态的持续指示。能提供完成度时使用 Progress；已有按钮或表格加载态优先使用宿主内置 Spinner。

  • variant 选择等待图形；size 优先于父级尺寸，无上下文时为 16。

  • 不渲染 children；加载说明文字在外部组合。需要完成比例时改用 Progress。

  • 加载状态默认名称随LocaleProvider更新，显式aria-label优先；不会替调用方翻译外部加载说明。

导入

import { Spinner } from '@snowui-design-system/components';

用法

变体

尺寸

速度

播放控制

API 参考

属性 类型 默认值 示例 描述
variant SpinnerVariant "circle" variant={value} 视觉变体风格
size ResourceSize — size={value} 尺寸（支持 12、16、20、24、28、32、40、48、80）；省略时优先继承父级 iconSize / size，无上下文时为 16
speed number 1 speed={42} 正数动画速度倍率；circle 基准周期 1000ms，spokes / pills 为 800ms，除以该倍率。非有限值或非正数回退为 1；显式 loopMotion 时序优先。
loopMotion LoopMotionConfig — loopMotion={value} 覆盖默认循环动画桥接配置；优先级高于 speed 推导出来的默认时长。若传入 preset，Spinner 仅消费其中的时序字段，不让 Frame 根节点重复旋转
children Snippet — <Spinner>Content</Spinner> 兼容 Frame 的类型声明；Spinner 使用内置动画图形，不渲染子内容。文字请在外部组合。