Progress

Progress is used to show the progress of current operation, and inform the user the current status.

Linear progress bar

Use percentage attribute to set the percentage. It's required and must be between 0-100. You can custom text format by setting format.

50%

Full

Internal percentage

In this case the percentage takes no additional space.

stroke-width attribute decides the width of progress bar, and use text-inside attribute to put description inside the progress bar.

70%

100%

80%

50%

Custom color

You can use color attr to set the progress bar color. it accepts color string, function, or array.

20%

Circular progress bar

You can specify type attribute to circle to use circular progress bar, and use width attribute to change the size of circle.

25%

Dashboard progress bar

You also can specify type attribute to dashboard to use dashboard progress bar.

10%

Customized content

Use default slot to add customized content.

Content

80%Progressing

Indeterminate progress

Use indeterminate attribute to set indeterminate progress, with duration to control the animation duration.

50%

Full

Striped progress

Use striped attribute to set striped progress. You can use striped-flow to get the stripes to flow, with duration to control the animation duration.

50%

API

Attributes

Name	Description	Type	Default
percentage required	percentage	`number`	0
type	the type of progress bar	`enum`	line
stroke-width	the width of progress bar	`number`	6
text-inside	whether to place the percentage inside progress bar, only works when `type` is 'line'	`boolean`	false
status	the current status of progress bar	`enum`	—
indeterminate	set indeterminate progress	`boolean`	false
duration	control the animation duration of indeterminate progress or striped flow progress	`number`	3
color	background color of progress bar. Overrides `status` prop	`string` / `function` / `Array`	''
width	the canvas width of circle progress bar	`number`	126
show-text	whether to show percentage	`boolean`	true
stroke-linecap	circle/dashboard type shape at the end path	`enum`	round
format	custom text format	`Function`	—
striped 2.3.4	stripe over the progress bar's color	`boolean`	false
striped-flow 2.3.4	get the stripes to flow	`boolean`	false