默认主题
进度条

示例

50%
基础用法

通过percent指定当前进度条百分比

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
50%
50%
50%
状态

通过status来指定状态:active normal error success warning

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
0 %
50 %
60 %
70 %
在进度条上展示百分比

添加inInnerText属性,可以在进度条上展示百分比

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
50%
50%
50%
尺寸

通过size来指定尺寸:default small mini

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
50%
圆形进度

type设为circle可以展示圆形进度

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
正在上传
40%
自定义百分比内容

组件默认会展示当前百分比,我们可以给组件添加子元素展示任意内容

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
type 类型 "bar" | "circle" "bar"
percent 当前百分比(0~100) Number 0
size 尺寸 "default" | "small" | "mini" "default"
isOuterText 是否展示后面的百分比 Boolean true
isInnerText 是否展示进度条上面的百分比 Boolean false
status 进度条状态 "success" | "error" | "active" | "normal" | "warning" "active"
strokeWidth 进度条指示线的宽度,单位px,只对type="circle"圆形进度有效 Number 10