进度条

用于展示操作进度，告知用户当前状态和预期。

基础用法

60%
<cb-progress v-model="test1" />

显示进度文本

60%
<cb-progress v-model="test1" show-text />

不同颜色

40%
20%
60%
80%
<cb-progress theme="success" v-model="test2" />
<cb-progress theme="info" v-model="test3" />
<cb-progress theme="warning" v-model="test4" />
<cb-progress theme="danger" v-model="test5" />

不同尺寸

40%
20%
60%
80%
<cb-progress v-model="test2" />
<cb-progress theme="success" small v-model="test3" />
<cb-progress theme="warning" tiny v-model="test4" />
<cb-progress theme="danger" tinier v-model="test5" />

条纹效果

40%
20%
60%
80%
<cb-progress theme="success" striped v-model="test2" />
<cb-progress theme="info" striped v-model="test3" />
<cb-progress theme="warning" striped v-model="test4" />
<cb-progress theme="danger" striped v-model="test5" />

垂直排列

40%
20%
60%
80%
<cb-progress theme="success" vertical v-model="test2" />
<cb-progress theme="info" vertical small v-model="test3" />
<cb-progress theme="warning" vertical tiny v-model="test4" />
<cb-progress theme="danger" vertical tinier v-model="test5" />

动画效果

45%
<cb-progress v-model="test6" striped :active="active" />
<cb-button @click="active = !active">切换动画</cb-button>

属性

参数 说明 类型 可选值 默认值
v-model 绑定值，表示进度百分比。 number — —
theme 风格 string 参考颜色文档 —
show-text 是否显示百分比文案 boolean — false
text 自定义百分比文案 string — —
striped 条纹效果 boolean — false
vertical 垂直进度条 boolean — false
active 动画效果 boolean — false
small 小型进度条 boolean — false
tiny 超小进度条 boolean — false
tinier 微型进度条 boolean — false