Progress 进度条

用于显示进度的进度条组件。

基本用法

通过 percentage 属性控制进度。

60%

<template>
  <i-progress :percentage="60" />
</template>

显示代码复制代码复制代码

隐藏进度提示

通过 labelTxt 属性控制是否显示进度提示。

<template>
  <i-progress :percentage="60" :labelTxt="false" />
</template>

显示代码复制代码复制代码

进度提示在内

条形进度条通过 innerLabel 属性控制是否显示进度提示，注意使用该属性时进度条最小高度会设为 20。

60%

<template>
  <i-progress :percentage="60" innerLabel />
</template>

显示代码复制代码复制代码

自定义进度提示

通过 label 插槽设置自定义进度提示。

😄

🌛

<template>
  <div className="i-design-demo-column">
    <i-progress :percentage="30">
      <template #label>😄</template>
    </i-progress>
    <i-progress :percentage="60">
      <template #label>
        <div>🌛</div>
      </template>
    </i-progress>
  </div>
</template>

显示代码复制代码复制代码

自定义进度条颜色

通过 color 属性设置自定义进度条颜色，backColor 属性控制进度条底色。

30%

60%

<template>
  <div className="i-design-demo-column">
    <i-progress :percentage="30" color="#FFCF2E" />
    <i-progress
      :percentage="60"
      color="linear-gradient(90deg, rgb(0, 255, 255), rgb(255, 0, 255))"
      backColor="#FFCF2E"
    />
  </div>
</template>

显示代码复制代码复制代码

自定义宽度或粗细

通过 width 来控制条形进度条长度/环形进度条直径，通过 strokeWidth 属性控制进度条粗细度。

30%

60%

<template>
  <div className="idesign-demo-block-column">
    <i-progress :percentage="30" :width="300" />
    <i-progress :percentage="60" :strokeWidth="20" />
  </div>
</template>

显示代码复制代码复制代码

环形进度条

通过 type 属性设置进度条类型，为 circle 时显示环形进度条。

0%

30%

60%

🌛

<template>
  <div className="idesign-demo-block-row">
    <i-progress type="circle" :percentage="0" />
    <i-progress type="circle" :percentage="30" :width="100" />
    <i-progress type="circle" :percentage="60" :width="100" :strokeWidth="20" />
    <i-progress type="circle" :percentage="90" :width="100">
      <template #label>
        <div>🌛</div>
      </template>
    </i-progress>
  </div>
</template>

显示代码复制代码复制代码

进度加载动画

通过 indeterminate 属性设置不确定的进度加载循环动画，可用 duration 控制循环速度，默认为 3。

30%

30%

0%

30%

0%

<template>
  <div className="idesign-demo-block-column">
    <i-progress :percentage="30" indeterminate />
    <i-progress :percentage="30" indeterminate :duration="1" />
  </div>
  <div className="idesign-demo-block-row" :style="{ marginTop: '20px' }">
    <i-progress type="circle" :width="100" indeterminate />
    <i-progress type="circle" :width="100" :percentage="30" indeterminate />
    <i-progress type="circle" :width="100" :duration="1" indeterminate />
  </div>
</template>

显示代码复制代码复制代码

Progress Attributes

属性	说明	类型	默认值
percentage	进度条百分比	number	0
type	进度条类型	"bar"〡"circle"	bar
labelTxt	是否显示进度提示文本	boolean	true
innerLabel	提示是否在进度条内部	boolean	false
color	进度条颜色	string	--
backColor	进度条底色	string	--
width	进度条长度/环形直径	string〡number	300
strokeWidth	进度条粗细度	number	6
indeterminate	触发进度加载动画	boolean	false
duration	进度加载动画速度	number	3

Progress Slots

插槽名	说明
label	自定义进度提示