ant-design/components/progress/index.en-US.md

category, group, title, description, cover, coverDark, demo

category	group	title	description	cover	coverDark	demo
Components	Feedback	Progress	Display the current progress of the operation.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original	cols 2

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.

Examples

Progress bar Circular progress bar Mini size progress bar Responsive circular progress bar Mini size circular progress bar Dynamic Custom text format Dashboard Progress bar with success segment Stroke Linecap Custom line gradient Progress bar with steps Circular progress bar with steps Progress size Change progress value position Custom semantic dom styling

API

Common props ref：Common props

Properties that shared by all types.

Property	Description	Type	Default	Version
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>	-
format	The template function of the content	function(percent, successPercent)	(percent) => percent + %	-
percent	To set the completion percentage	number	0	-
railColor	The color of unfilled part	string	-	-
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	-
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>	-
success	Configs of successfully progress bar	{ percent: number, strokeColor: string }	-	-
trailColor	The color of unfilled part. Please use railColor instead	string	-	-
type	To set the type, options: line circle dashboard	string	line
size	Progress size	number | [number | string, number] | { width: number, height: number } | "small" | "default"	"default"	5.3.0, Object: 5.18.0

type="line"

Property	Description	Type	Default	Version
steps	The total step count	number	-	-
rounding	The function to round the value	(step: number) => number	Math.round	5.24.0
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[]
percentPosition	Progress value position, passed in object, align indicates the horizontal position of the value, type indicates whether the value is inside or outside the progress bar	{ align: string; type: string }	{ align: "end", type: "outer" }	5.18.0

type="circle"

Property	Description	Type	Default	Version
steps	The total step count.When passing an object, count refers to the number of steps, and gap refers to the distance between them.When passing number, the default value for gap is 2.	number | { count: number, gap: number }	-	5.16.0
strokeColor	The color of circular progress, render gradient when passing an object	string | { number%: string }	-	-
strokeWidth	To set the width of the circular progress, unit: percentage of the canvas width	number	6	-

type="dashboard"

Property	Description	Type	Default	Version
steps	The total step count.When passing an object, count refers to the number of steps, and gap refers to the distance between them.When passing number, the default value for gap is 2.	number | { count: number, gap: number }	-	5.16.0
gapDegree	The gap degree of half circle, 0 ~ 295	number	75
gapPlacement	The gap placement, options: top bottom start end	string	bottom
gapPosition	The gap position, options: top bottom left right, please use gapPlacement instead	string	bottom
strokeWidth	To set the width of the dashboard progress, unit: percentage of the canvas width	number	6

Semantic DOM

Design Token