进度条组件,多用于运行一段时间的场景,有效减轻用户在等待中产生的焦虑感。
基本使用
简单的进度条。
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