Skip to content
iuiDesign
100%
02:32
本页目录

进度条组件,多用于运行一段时间的场景,有效减轻用户在等待中产生的焦虑感。

基本使用

简单的进度条。

html
<iui-progress :modelValue="50" />
<iui-progress :modelValue="50" />

显示百分比

通过 percent 开启百分比显示

html
<iui-progress :modelValue="50" percent />
<iui-progress :modelValue="50" percent />

进度条大小

通过 size 设置进度条的大小

html
<iui-progress :modelValue="20" percent size="2" />
<iui-progress :modelValue="60" percent size="6" />
<iui-progress :modelValue="80" percent size="8" />
<iui-progress :modelValue="20" percent size="2" />
<iui-progress :modelValue="60" percent size="6" />
<iui-progress :modelValue="80" percent size="8" />

进度条颜色

通过 color 设置进度条和百分比的颜色

html
<iui-progress :modelValue="75" percent color="#F53F3F" />
<iui-progress :modelValue="75" percent color="#F53F3F" />

API

<Progress>props
参数描述类型默认值
modelValue (v-model)当前进度Number0
percent显示百分比Booleanfalse
size进度条高度Number2
color进度条颜色String#165DFF