Progress进度条

Progress进度条用于展示操作的当前进度，适用于在操作耗时较长时，向用户呈现操作的进度与状态，尤其是当操作可能打断当前界面、后台运行且耗时超2秒，或者需要显示操作完成百分比的场景。

代码演示

1. 进度条：标准进度条，可通过status属性设置不同状态，如active（激活）、exception（异常），还可通过show-info属性控制是否显示进度数值或状态图标。

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>

3. 小型进度条：适用于狭窄区域，使用size="small"设置。

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>

5. 响应式进度圈：当width小于等于20时，进度信息以Tooltip形式显示。

代码发布

<template>
  <div>
    <a-progress
      type="circle"
      trail-color="#e6f4ff"
      :percent="60"
      :stroke-width="20"
      :size="12"
      :format="number => `进行中，已完成${number}%`"
    />
    <span :style="{ marginLeft: 8 }">代码发布</span>
  </div>
</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、butt、square	round	butt	square
success	成功进度条相关配置	{ percent: number, strokeColor: string }	-	-
title	html标签title	string	-	3.0
trailColor	未完成的分段的颜色	string	-	-
type	类型，可选line、circle、dashboard	string	line	-
size	进度条的尺寸	number | [number, number] | "small" | "default"	"default"	-

type="line"

属性	说明	类型	默认值	版本
steps	进度条总共步数	number	-	-
strokeColor	进度条的色彩，传入object时为渐变，有steps时支持传入数组	string | string[] | { from: string; to: string; direction: string }	-	-

type="circle"

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

type="dashboard"

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