代码演示
如何引入
标准的进度条
通过
通过
通过
通过
如果
stroke属性来控制进度条的填充色通过
percent属性控制已完成的进度通过
size属性控制进度条尺寸通过
aria-label说明进度条具体代表含义如果
size预设的尺寸不满足，可以通过style传入 height 自定义进度条高度展示百分比文本
通过
showInfo控制是否展示百分比数字，可以通过format格式化展示文本垂直的进度条
设置
direction='vertical'，展示垂直进度条，可以通过style传入 width 控制进度条宽度环形进度条
将 type 设为
circle，进度条将会展示成环状。进度条默认尺寸为 72 x 72你可以通过修改
width来控制环形进度条的大小小号的环形进度条
小号进度条默认尺寸为 24 x 24
动态改变进度
自定义中心文字内容
你可以通过传入
如果不需要中心文本内容，你可以将
format 函数自定义中心文字，format 的入参为当前百分比如果不需要中心文本内容，你可以将
showInfo 设为 false，或者在 format 中直接返回空字符串圆角/方角边缘
通过 strokeLinecap 属性，你可以控制环形进度条边缘形状
API 参考
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| aria-label | aria-label属性，用来给当前元素加上的标签描述, 用于提升可访问性 v2.2.0 后提供 | string | |
| aria-labelledby | aria-labelledby属性，表明某些元素的 id 是当前元素的标签。它被用来确定控件或控件组与它们标签之间的联系, 提升可访问性 v2.2.0 后提供 | string | |
| aria-valuetext | aria-valuetext属性，用于提升可访问性 v2.2.0 后提供 | string | |
| className | 样式类名 | string | |
| direction | 条状进度条方向 horizontal、vertical | string | 'horizontal' |
| format | 格式化函数，入参为当前百分比，return 的结果将会直接渲染在圆形进度条中心 | (percent: number) => ReactNode | (percent) => percent + '%' |
| id | id 标识 v2.2.0 后提供 | string | |
| orbitStroke | 进度条轨道填充色 v1.0.0 后提供 | string | 'var(--semi-color-fill-0)' |
| percent | 进度百分比 | number | |
| showInfo | 环形进度条是否显示中间文本，条状进度条后右侧是否显示文本 | boolean | false |
| size | 尺寸,可选default、small(仅 type=circle 生效)、large(仅 type=line 生效) | string | 'default' |
| stroke | 进度条填充色 | string | 'var(--semi-color-success)' |
| strokeLinecap | 圆角round/方角square(仅在 type='circle'模式下生效) | string | 'round' |
| strokeWidth | type 为line时，该属性控制进度条高度; type 为circle时，该属性控制进度条宽度 | number | 4 |
| style | 样式 | CSSProperties | |
| type | 类型，可选line、circle | string | 'line' |
| width | 环形进度条宽度 | number | size='default'时为 72，'small'为 24 |
Accessibility
ARIA
- Progress 具有
progressbarrole 来表示它是一个进度条组件。 - Progress 会自动将
aria-valuenow设置为传递给组件的进度百分比（percent），以确保屏幕阅读器可以获取正确的百分比数值。另外，Progress 支持传入aria-valuetext，当你传入时，根据 W3C 规范，aria-valuetext将优先被屏幕阅读器使用消费，而不是aria-valuenow - Progress 支持传入
aria-label、aria-labelledby- 当 Progress 外部存在关于 Progress 作用的描述元素时，你可以通过 aria-labelledby 显式指定某些元素的 id 是 Progress 的标签
- 否则你应当通过 aria-label 说明 Progress 所代表的具体数值含义
