Progress
进度条

展示操作的当前进度。
使用import{ Progress }from"antd";

何时使用

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

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

代码演示

30%
50%

标准的进度条。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
30%
50%

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
30%

小一号的圈形进度。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
75 Days
Done

format 属性指定格式。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
60%
60%
60%

分段展示进度,可以用于细化进度语义。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
99.9%
50%
90%
93%
90%
93%

渐变色封装,circledashboard 设置渐变时 strokeLinecap 会被忽略。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom count:
Custom gap:
50%

步骤进度圈,支持颜色分段展示,默认间隔为 2px。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.16.0
0%
10%
50%
60%
100%
60%
60%

改变进度数值位置,可使用 percentPosition 调整,使进度条数值在进度条内部、外部或底部。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.18.0
75%

圈形的进度。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
代码发布

响应式的圈形进度,当 width 小于等于 20 的时候,进度信息将不会显示在进度圈里面,而是以 Tooltip 的形式显示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
0%
0%

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
75%
75%

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
75%
75%
75%

通过设定 strokeLinecap="butt" 可以将进度条边缘的形状从闭合的圆形的圆弧调整为断口,详见 stroke-linecap

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
50%
30%
60%

带步骤的进度条。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%
50%

进度条尺寸。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

各类型共用的属性。

属性说明类型默认值版本
format内容的模板函数function(percent, successPercent)(percent) => percent + %-
percent百分比number0-
showInfo是否显示进度数值或状态图标booleantrue-
status状态,可选:success exception normal active(仅限 line)string--
strokeColor进度条的色彩string--
strokeLinecap进度条的样式round | butt | square,区别详见 stroke-linecapround-
success成功进度条相关配置{ percent: number, strokeColor: string }--
trailColor未完成的分段的颜色string--
type类型,可选 line circle dashboardstringline-
size进度条的尺寸number | [number | string, number] | { width: number, height: number } | "small" | "default""default"5.3.0, Object: 5.18.0

type="line"

属性说明类型默认值版本
steps进度条总共步数number--
rounding用于四舍五入数值的函数(step: number) => numberMath.round5.24.0
strokeColor进度条的色彩,传入 object 时为渐变。当有 steps 时支持传入一个数组。string | string[] | { from: string; to: string; direction: string }-4.21.0: string[]
percentPosition进度数值位置,传入对象,align 表示数值的水平位置,type 表示数值在进度条内部还是外部{ align: string; type: string }{ align: "end", type: "outer" }5.18.0

type="circle"

属性说明类型默认值版本
steps进度条总共步数,传入 object 时,count 指步数,gap 指间隔大小。传 number 类型时,gap 默认为 2。number | { count: number, gap: number }-5.16.0
strokeColor圆形进度条线的色彩,传入 object 时为渐变string | { number%: string }--
strokeWidth圆形进度条线的宽度,单位是进度条画布宽度的百分比number6-

type="dashboard"

属性说明类型默认值版本
steps进度条总共步数,传入 object 时,count 指步数,gap 指间隔大小。传 number 类型时,gap 默认为 2。number | { count: number, gap: number }-5.16.0
gapDegree仪表盘进度条缺口角度,可取值 0 ~ 295number75-
gapPosition仪表盘进度条缺口位置top | bottom | left | rightbottom-
strokeWidth仪表盘进度条线的宽度,单位是进度条画布宽度的百分比number6-

主题变量(Design Token)

组件 Token如何定制?

Token 名称描述类型默认值
circleIconFontSize圆形进度条图标大小string1.1666666666666667em
circleTextColor圆形进度条文字颜色stringrgba(0,0,0,0.88)
circleTextFontSize圆形进度条文本大小string1em
defaultColor进度条默认颜色string#1677ff
lineBorderRadius条状进度条圆角number100
remainingColor进度条剩余部分颜色stringrgba(0,0,0,0.06)

全局 Token如何定制?