Progress

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.

Examples

Progress bar

A standard progress bar.

Mini size progress bar

Appropriate for a narrow area.

Mini size circular progress bar

A smaller circular progress bar.

Dynamic

A dynamic progress bar is better.

Dashboard

By setting type=dashboard, you can get a dashboard style of progress easily. Modify gapDegree to set the degree of gap.

Stroke Linecap

By setting strokeLinecap="butt", you can change the linecaps from round to butt, see stroke-linecap for more information.

Progress bar with steps

A progress bar with steps.

Circular progress bar

A circular progress bar.

Responsive circular progress bar

Responsive circular progress bar. When width is smaller than 20, progress information will be displayed in Tooltip.

Dynamic circular progress bar

A dynamic progress bar is better.

Custom text format

You can set a custom text by setting the format prop.

Progress bar with success segment

Show several parts of progress with different status.

Custom line gradient

A package of linear-gradient. It is recommended to only pass two colors.

Progress size

The size of progress.

API

Common props ref：Common props

Properties that shared by all types.

Property	Description	Type	Default	Version
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`
size	Progress size	number \| [number \| string, number] \| "small" \| "default"	"default"	v5.3.0

`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[]`

`type="circle"`

Property	Description	Type	Default	Version
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	-

`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

Design Token

Global Token

API

Common props ref：Common props

Properties that shared by all types.

Property	Description	Type	Default	Version
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`
size	Progress size	number \| [number \| string, number] \| "small" \| "default"	"default"	v5.3.0

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[]`

type="circle"

Property	Description	Type	Default	Version
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	-

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

Namu Design

Progress

Namu Design

Progress

When To Use

Examples

API

`type="line"`

`type="circle"`

`type="dashboard"`

Design Token

Global Token

When To Use

Examples

API

`type="line"`

`type="circle"`

`type="dashboard"`

Design Token

Global Token

ProgressChangelog

ProgressChangelog

When To Use

Examples

API

type="line"

type="circle"

type="dashboard"

Design Token

Global Token

When To Use

Examples

API

type="line"

type="circle"

type="dashboard"

Design Token

Global Token

Progress

Progress

`type="line"`

`type="circle"`

`type="dashboard"`

`type="line"`

`type="circle"`

`type="dashboard"`