Progress - Ant Design

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

<code src="./demo/line.tsx">Progress bar</code> <code src="./demo/circle.tsx">Circular progress bar</code> <code src="./demo/line-mini.tsx">Mini size progress bar</code> <code src="./demo/circle-micro.tsx">Responsive circular progress bar</code> <code src="./demo/circle-mini.tsx">Mini size circular progress bar</code> <code src="./demo/dynamic.tsx">Dynamic</code> <code src="./demo/format.tsx">Custom text format</code> <code src="./demo/dashboard.tsx">Dashboard</code> <code src="./demo/segment.tsx">Progress bar with success segment</code> <code src="./demo/linecap.tsx">Stroke Linecap</code> <code src="./demo/gradient-line.tsx">Custom line gradient</code> <code src="./demo/steps.tsx">Progress bar with steps</code> <code src="./demo/circle-steps.tsx" version="5.16.0">Circular progress bar with steps</code> <code src="./demo/size.tsx">Progress size</code> <code src="./demo/info-position.tsx" version="5.18.0">Change progress value position</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>

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" \| "medium"	"medium"	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