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

Linear progress bar

Internal percentage

In this case the percentage takes no additional space.

Custom color

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

Circular progress bar

Dashboard progress bar

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

Customized content

Indeterminate progress


NameDescriptionTypeAccepted ValuesDefault
percentagepercentage, requirednumber(0-100)0
typethe type of progress barstringline/circle/dashboardline
stroke-widththe width of progress barnumber6
text-insidewhether to place the percentage inside progress bar, only works when type is 'line'booleanfalse
statusthe current status of progress barstringsuccess/exception/warning
indeterminateset indeterminate progressboolean-false
durationcontrol the animation duration of indeterminate progressnumber-3
colorbackground color of progress bar. Overrides status propstring/function/array''
widththe canvas width of circle progress barnumber126
show-textwhether to show percentagebooleantrue
stroke-linecapcircle/dashboard type shape at the end pathstringbutt/round/squareround
formatcustom text formatfunction(percentage)


defaultCustomized content, parameter is { percentage }