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.

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.

Custom color

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

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.

Dashboard progress bar

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

Customized content

Use default slot to add customized content.

Indeterminate progress

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

Attributes

Attribute	Description	Type	Accepted Values	Default
percentage	percentage, required	number	0-100	0
type	the type of progress bar	string	line / circle / dashboard	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	string	success / exception / warning	—
indeterminate	set indeterminate progress	boolean	-	false
duration	control the animation duration of indeterminate 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	string	butt / round / square	round
format	custom text format	function(percentage)	—	—

Slots

Name	Description
default	Customized content, parameter is { percentage }