Progress 进度条

展示操作的当前进度。

何时使用

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

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

示例

基本用法

标准进度条：



状态图标进度条：



pause：


自定义色值进度条：



环形进度条：





状态图标进度条：



pause：


自定义色值进度条：



小尺寸：





微型环形进度条：

<template>
  标准进度条：
  <br />
  <br />
  <f-progress :percent="0" />
  <f-progress :percent="30" />
  <f-progress :percent="60" />

  <br />
  <br />
  状态图标进度条：
  <br />
  <br />
  <f-progress :percent="60" status="success" />
  <f-progress :percent="60" status="exception" />
  <br />
  <br />
  pause：
  <br />
  <f-progress :percent="40" pause />

  <br />
  <br />
  自定义色值进度条：
  <br />
  <br />
  <f-progress :percent="40" />
  <f-progress :percent="40" stroke-color="#D9E000" />
  <f-progress :percent="60" stroke-color="#EF43EF" />

  <br />
  <br />
  环形进度条：
  <br />
  <br />

  <f-space>
    <f-progress type="circle" :width="74" :percent="0" />
    <f-progress type="circle" :width="74" :percent="30" />
    <f-progress type="circle" :width="74" :percent="60" />
  </f-space>
  <br />
  <br />

  <br />
  <br />
  状态图标进度条：
  <br />
  <br />
  <f-space>
    <f-progress type="circle" :width="74" :percent="60" status="success" />
    <f-progress type="circle" :width="74" :percent="60" status="exception" />
  </f-space>
  <br />
  <br />
  pause：
  <br />
  <f-progress type="circle" :width="74" :percent="40" pause />

  <br />
  <br />
  自定义色值进度条：
  <br />
  <br />
  <f-space>
    <f-progress type="circle" :width="74" :percent="40" />
    <f-progress type="circle" :width="74" :percent="40" stroke-color="#D9E000" />
    <f-progress type="circle" :width="74" :percent="60" stroke-color="#EF43EF" />
  </f-space>

  <br />
  <br />
  小尺寸：
  <br />
  <br />
  <f-progress :percent="50" :stroke-width="4" />
  <br />
  <br />
  <f-progress type="circle" :width="44" :stroke-width="8" :percent="50" />

  <br />
  <br />
  微型环形进度条：
  <br />
  <br />
  <f-space>
    <f-progress type="circle" :show-info="false" :width="12" :stroke-width="16" :percent="0" />
    <f-progress type="circle" :show-info="false" :width="12" :stroke-width="16" :percent="20" />
    <f-progress type="circle" :show-info="false" :width="12" :stroke-width="16" :percent="40" stroke-color="#D9E000" />
    <f-progress type="circle" :show-info="false" :width="12" :stroke-width="16" :percent="60" stroke-color="#EF43EF" />
    <f-progress type="circle" :show-info="false" :width="12" :stroke-width="16" :percent="80" pause />
  </f-space>
  <br />
  <br />
</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 }	-
title	html 标签 title	string	-	3.0
trailColor	未完成的分段的颜色	string	-
type	类型，可选 line circle dashboard	string	line
pause(新)	是否为pause状态	boolean	false

注意

• 新增pause属性

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