Progress 进度条
显示任务执行进度,支持线形与圆环两种形态、状态色与隐藏文字。
基础用法
基础用法
状态
状态
隐藏文字
隐藏文字
圆形进度
Circle 圆环
圆环默认直径 48、线宽 6,圆心显示百分比;type="circle" 切换形态。
圆形尺寸与线宽
尺寸 / 线宽
圆形状态
Circle 状态色
status="success|error" 整环变色(success 绿、error 红);show-text="false" 隐藏圆心百分比。
动态进度
动态进度
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
no-text | 隐藏右侧/圆心百分比文本 | boolean | — |
percent | 进度百分比(0–100,自动夹取) | string | 0 |
show-text | 是否显示百分比文本 | string | true |
size | circle 直径(px) | string | 48 |
status | 状态色;error 红色、success 绿色,未设置且进度满 100 时显示成功绿 | string | — |
stroke-width | circle 线宽(px) | string | 6 |
type | 形态:line(线形)/ circle(圆环) | string | line |
role="progressbar" + aria-valuenow / aria-valuemin / aria-valuemax(line 与 circle 均同步)。