React 组件

UGProgress 进度条

UGProgress 用于表达任务完成度、上传进度和流程执行状态。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGProgress } from '@ug666/ui-react'

变体预览

基础进度条与带标签进度条。

68%

状态展示

不同颜色适合区分阶段或状态。

25%

72%

100%

动态进度

数值变化使用统一动效 Token 平滑过渡，减少动效模式下立即更新。

资源处理进度

24%

尺寸展示

size 控制轨道粗细，容器宽度仍由页面布局决定。

48%

代码示例

典型场景是发布流程或文件上传。

tsx

import { UGProgress } from '@ug666/ui-react'

export function BuildProgress() {
  return <UGProgress value={72} showLabel color="success" aria-label="构建进度" />
}

属性

属性	类型	默认值	说明
value	number	—	当前进度值。
max	number	100	最大值。
showLabel	boolean	false	显示右侧百分比文本。
color	'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'primary'	进度条语义颜色。
size	'sm' \| 'md' \| 'lg'	'md'	控制轨道粗细、间距和标签字号。
aria-label / aria-labelledby	string	'进度'	为进度条提供具体业务名称；未传入时使用通用名称“进度”。