跳到主要内容

CircularProgress

  • 组件说明：圆弧进度指示器，支持确定态与不确定态。
  • 组件组：Progress Indicators
  • Figma 页面：↳ Progress Indicators > Progress Indicator

不确定态​

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

确定态​

结果
Loading...
实时编辑器
render(
  <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
    <CircularProgress size="lg" value={0} />
    <CircularProgress size="lg" value={25} />
    <CircularProgress size="lg" value={50} />
    <CircularProgress size="lg" value={75} />
    <CircularProgress size="lg" value={100} />
  </div>,
)

自定义颜色​

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

命名空间用法​

结果
Loading...
实时编辑器
render(<ProgressIndicators.CircularProgress size="md" value={60} />)

CircularProgress Props​

属性类型默认值说明
size'sm' | 'md' | 'lg''md'预设尺寸 16/24/36px
valuenumber—进度值 (0-100)，不传为不确定态
classNamestring—自定义样式类