Progress 进度条
用于展示操作进度，告知用户当前状态和预期。
直线进度条
进度条内显示百分比标识
百分比不占用额外空间，适用于文件上传等场景。
自定义进度条的颜色
可以通过 color 属性来设置进度条的颜色。 该属性可以接受十六进制颜色值，函数和数组。
环形进度条
仪表盘形进度条
您也可以指定 type 属性到 dashboard 使用控制面板进度栏。
自定义内容
动画进度条
条纹进度条
API
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| percentage | 百分比，必填 | number | 0 |
| type | 进度条类型 | enum | line |
| stroke-width | 进度条的宽度 | number | 6 |
| text-inside | 进度条显示文字内置在进度条内（仅 type 为 'line' 时可用） | boolean | false |
| status | 进度条当前状态 | enum | — |
| indeterminate | 是否为动画进度条 | boolean | false |
| duration | 控制动画进度条速度和条纹进度条流动速度 | number | 3 |
| color | 进度条背景色 进度条背景色 （会覆盖 status 状态颜色） | string / function / Array | '' |
| width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | 126 |
| show-text | 是否显示进度条文字内容 | boolean | true |
| stroke-linecap | circle/dashboard 类型路径两端的形状 | enum | round |
| format | 指定进度条文字内容 | Function | — |
| striped 2.3.4 | 在进度条上增加条纹 | boolean | false |
| striped-flow 2.3.4 | 让进度条上的条纹流动起来 | boolean | false |
Slots
| 名称 | 说明 |
|---|---|
| default | 自定义内容，参数为 { percentage } |