Progress 进度条

展示操作的当前进度。

何时使用

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

  • 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；
  • 当需要显示一个操作完成的百分比时。

代码演示

30%
50%
进度条

标准的进度条。

<template>
  <a-progress :percent="30" />
  <a-progress :percent="50" status="active" />
  <a-progress :percent="70" status="exception" />
  <a-progress :percent="100" />
  <a-progress :percent="50" :show-info="false" />
</template>
30%
50%
小型进度条

适合放在较狭窄的区域内。

<template>
  <div style="width: 170px">
    <a-progress :percent="30" size="small" />
    <a-progress :percent="50" size="small" status="active" />
    <a-progress :percent="70" size="small" status="exception" />
    <a-progress :percent="100" size="small" />
  </div>
</template>
0%
动态展示

会动的进度条才是好进度条。

<template>
  <div>
    <a-progress :percent="defaultPercent" />
    <a-button-group>
      <a-button @click="decline">
        <template #icon><minus-outlined /></template>
      </a-button>
      <a-button @click="increase">
        <template #icon><plus-outlined /></template>
      </a-button>
    </a-button-group>
  </div>
</template>
<script lang="ts">
import { MinusOutlined } from '@ant-design/icons-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {
    MinusOutlined,
    PlusOutlined,
  },
  setup() {
    const defaultPercent = ref<number>(0);
    const increase = () => {
      const percent = defaultPercent.value + 10;
      defaultPercent.value = percent > 100 ? 100 : percent;
    };
    const decline = () => {
      const percent = defaultPercent.value - 10;
      defaultPercent.value = percent < 0 ? 0 : percent;
    };
    return {
      defaultPercent,
      increase,
      decline,
    };
  },
});
</script>
75 Days
Done
75
自定义文字格式

format 属性指定格式。

<template>
  <div>
    <a-progress type="circle" :percent="75" :format="percent => `${percent} Days`" />
    <a-progress type="circle" :percent="100" :format="() => 'Done'" />
    <a-progress type="circle" :percent="75">
      <template #format="percent">
        <span style="color: red">{{ percent }}</span>
      </template>
    </a-progress>
  </div>
</template>
60%
60%
60%
分段进度条

标准的进度条。

<template>
  <div>
    <a-tooltip title="3 done / 3 in progress / 4 to do">
      <a-progress :percent="60" :success-percent="30" />
    </a-tooltip>
    <a-tooltip title="3 done / 3 in progress / 4 to do">
      <a-progress :percent="60" :success-percent="30" type="circle" />
    </a-tooltip>
    <a-tooltip title="3 done / 3 in progress / 4 to do">
      <a-progress :percent="60" :success-percent="30" type="dashboard" />
    </a-tooltip>
  </div>
</template>
99.9%
99.9%
90%
自定义进度条渐变色

linear-gradient 的封装。推荐只传两种颜色。

<template>
  <div>
    <a-progress
      :stroke-color="{
        '0%': '#108ee9',
        '100%': '#87d068',
      }"
      :percent="99.9"
    />
    <a-progress
      :stroke-color="{
        from: '#108ee9',
        to: '#87d068',
      }"
      :percent="99.9"
      status="active"
    />
    <a-progress
      type="circle"
      :stroke-color="{
        '0%': '#108ee9',
        '100%': '#87d068',
      }"
      :percent="90"
    />
    <a-progress
      type="circle"
      :stroke-color="{
        '0%': '#108ee9',
        '100%': '#87d068',
      }"
      :percent="100"
    />
  </div>
</template>
75%
进度圈

圈形的进度。

<template>
  <a-progress type="circle" :percent="75" />
  <a-progress type="circle" :percent="70" status="exception" />
  <a-progress type="circle" :percent="100" />
</template>
30%
小型进度圈

小一号的圈形进度。

<template>
  <a-progress type="circle" :percent="30" :width="80" />
  <a-progress type="circle" :percent="70" :width="80" status="exception" />
  <a-progress type="circle" :percent="100" :width="80" />
</template>
0%
进度圈动态展示

会动的进度条才是好进度条。

<template>
  <div>
    <a-progress type="circle" :percent="defaultPercent" />
    <a-button-group>
      <a-button @click="decline">
        <template #icon><minus-outlined /></template>
      </a-button>
      <a-button @click="increase">
        <template #icon><plus-outlined /></template>
      </a-button>
    </a-button-group>
  </div>
</template>
<script lang="ts">
import { MinusOutlined } from '@ant-design/icons-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {
    MinusOutlined,
    PlusOutlined,
  },
  setup() {
    const defaultPercent = ref<number>(0);
    const increase = () => {
      const percent = defaultPercent.value + 10;
      defaultPercent.value = percent > 100 ? 100 : percent;
    };
    const decline = () => {
      const percent = defaultPercent.value - 10;
      defaultPercent.value = percent < 0 ? 0 : percent;
    };
    return {
      defaultPercent,
      increase,
      decline,
    };
  },
});
</script>
75%
仪表盘

通过设置 type=dashboard，可以很方便地实现仪表盘样式的进度条。若想要修改缺口的角度，可以设置 gapDegree 为你想要的值。

<template>
  <div>
    <a-progress type="dashboard" :percent="75" />
  </div>
</template>
75%
75%
75%
圆角/方角边缘

strokeLinecap="square|round" 可以调整进度条边缘的形状。

<template>
  <div>
    <a-progress stroke-linecap="square" :percent="75" />
    <a-progress stroke-linecap="square" :percent="75" type="circle" />
    <a-progress stroke-linecap="square" :percent="75" type="dashboard" />
  </div>
</template>
50%

30%

步骤进度条

带步骤的进度条。

<template>
  <a-progress :percent="50" :steps="3" />
  <br />
  <a-progress :percent="30" :steps="5" />
  <br />
  <a-progress :percent="100" :steps="5" size="small" stroke-color="#52c41a" />
</template>

API#

各类型共用的属性。

属性 说明 类型 默认值
format 内容的模板函数 function(percent, successPercent) (percent) => percent + %
percent 百分比 number 0
showInfo 是否显示进度数值或状态图标 boolean true
status 状态，可选：success exception normal active(仅限 line) string -
strokeColor 进度条的色彩 string -
strokeLinecap 进度条的样式 round | square round
success 成功进度条相关配置 { percent: number, strokeColor: string } -
trailColor 未完成的分段的颜色 string -
type 类型，可选 line circle dashboard string line

type="line"

属性 说明 类型 默认值
steps 进度条总共步数 number -
strokeColor 进度条的色彩，传入 object 时为渐变 string | { from: string; to: string; direction: string } -
strokeWidth 进度条线的宽度，单位 px number 10

type="circle"

属性 说明 类型 默认值
strokeColor 圆形进度条线的色彩，传入 object 时为渐变 string | object -
strokeWidth 圆形进度条线的宽度，单位是进度条画布宽度的百分比 number 6
width 圆形进度条画布宽度，单位 px number 132

type="dashboard"

属性 说明 类型 默认值
gapDegree 仪表盘进度条缺口角度，可取值 0 ~ 295 number 75
gapPosition 仪表盘进度条缺口位置 top | bottom | left | right bottom
strokeWidth 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 number 6
width 仪表盘进度条画布宽度，单位 px number 132