跳到主要内容

Spinner

  • 组件说明：辐射线旋转加载器，适用于一般性等待场景。
  • 组件组：Progress Indicators
  • Figma 页面：↳ Progress Indicators > Spinner

基础用法​

结果
Loading...
实时编辑器
render(
  <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
    <Spinner size="sm" />
    <Spinner size="md" />
    <Spinner size="lg" />
  </div>,
)

自定义颜色​

结果
Loading...
实时编辑器
render(
  <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
    <Spinner className="text-[var(--Labels-Primary)]" />
    <Spinner className="text-[var(--Grays-Gray-4)]" />
    <Spinner className="text-[var(--Labels-Error)]" />
  </div>,
)

命名空间用法​

结果
Loading...
实时编辑器
render(<ProgressIndicators.Spinner size="sm" />)

Spinner Props​

属性类型默认值说明
size'sm' | 'md' | 'lg''md'预设尺寸 16/24/36px
classNamestring—自定义样式类