ant-design/components/progress/index.en-US.md
afc163 2113c25664
feat: Progress steps support custom strokeColor for each step (#35855)
* feat: <Progress steps /> could accept string[] as strokeColor

close #35852
close #26858

* fix: tsx demo

* docs: add version column
2022-06-01 23:00:03 +08:00

2.8 KiB

category type title cover
Components Feedback Progress https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg

Display the current progress of an operation flow.

When To Use

If it will take a long time to complete an operation, you can use Progress to show the current progress and status.

  • When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
  • When you need to display the completion percentage of an operation.

API

Properties that shared by all types.

Property Description Type Default
format The template function of the content function(percent, successPercent) (percent) => percent + %
percent To set the completion percentage number 0
showInfo Whether to display the progress value and the status icon boolean true
status To set the status of the Progress, options: success exception normal active(line only) string -
strokeColor The color of progress bar string -
strokeLinecap To set the style of the progress linecap round | butt | square, see stroke-linecap round
success Configs of successfully progress bar { percent: number, strokeColor: string } -
trailColor The color of unfilled part string -
type To set the type, options: line circle dashboard string line

type="line"

Property Description Type Default Version
steps The total step count number - -
strokeColor The color of progress bar, render linear-gradient when passing an object, could accept string[] when has steps. string | string[] | { from: string; to: string; direction: string } - 4.21.0: string[]
strokeWidth To set the width of the progress bar, unit: px number 10 -

type="circle"

Property Description Type Default
strokeColor The color of circular progress, render linear-gradient when passing an object string | object -
strokeWidth To set the width of the circular progress, unit: percentage of the canvas width number 6
width To set the canvas width of the circular progress, unit: px number 132

type="dashboard"

Property Description Type Default
gapDegree The gap degree of half circle, 0 ~ 295 number 75
gapPosition The gap position, options: top bottom left right string bottom
strokeWidth To set the width of the dashboard progress, unit: percentage of the canvas width number 6
width To set the canvas width of the dashboard progress, unit: px number 132