Progress 进度条
代码演示
30%
加载动画
线性进度条
线性进度条的基本用法, 根据percent数值进行百分比进度展示, animate属性用于开启进度动画, 同时还提供了状态展示等功能, 具体用法请查看代码或参数说明。
查看代码 < />
<template>
<w-progress :percent="30" />
<w-progress :percent="80" :animate="true"
text="加载动画" status="text" />
<w-progress :percent="77" status="exception" />
<w-progress :percent="100" status="success" />
<w-progress :percent="90" :show-text="false" />
</template>75%
环形进度条
环形进度条（半径、粗细尺寸可根据具体场景自定，文字也可自定义）。
查看代码 < />
<template>
<w-progress :percent="75" type="circle" />
<w-progress :percent="75" type="circle" status="exception" />
<w-progress :percent="100" type="circle" status="success" />
</template>80%
正常
异常
仪表盘
仪表盘（半径、粗细尺寸可根据具体场景自定，文字也可自定义）。
查看代码 < />
<template>
<w-progress :percent="80" type="dash-board" />
<w-progress :percent="75" type="dash-board"
status="text" text="正常" inner-color="#5DB730" />
<w-progress :percent="30" type="dash-board"
status="text" text="异常" inner-color="#F52C2C" />
</template>API
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| animate | 是否启用加载动画(仅条形进度条可用) | Boolean | — | false | |
| inner-color | 进度条背景色（也可以覆盖 status 状态颜色） | String | — | — | |
| percent | 百分比 | Number | 0-100 | 0 | |
| stroke-width | 进度条的宽度，单位 px | Number | — | 8 | |
| status | 进度条当前状态 | String | success / exception / text | — | |
| show-text | 是否显示进度条文字内容 | Boolean | — | true | |
| text | 进度条显示文字 | String | — | — | |
| type | 进度条类型 | String | line / circle / dash-board | line | |
| width | 环形进度条画布宽度（只在环形进度条时生效） | Number | 85 |
贡献者
| 类型 | 参与者 |
|---|---|
| 设计者 | UED视觉组 |
| 维护者 | UED前端组 |