Progress

Extended from PrimeVue ProgressBar

Basic example

Animated transition

If the value of the progress bar is changed programmatically, it will animate to the new value. Try clicking one of the buttons below to add or subtract from the progress bar's value.

Showing the value

These examples show how to make the value of the progress bar visible, and how to format it to display in whatever way you want.

20%
2 of 10
2/10

Customized height

The height of the progress bar is customizable. The indicator circle will scale proportionally.

Dynamic height change

The height of the progress bar can also be changed dynamically as needed.

Hide indicator circle

This example shows how to hide the indicator circle for a simpler progress bar.

Props

Name
formatter
Type
Function
Default
(val: number) => `${val}%`
Description
Allows controlling the display of the value displayed when showValue is set to true.
Name
height
Type
String
Default
0.125rem
Description
Specifies height of the progress bar.
Name
showCircle
Type
Boolean
Default
true
Description
Set to false to hide the indicator circle.
Name
showValue
Type
Boolean
Default
false
Description
When present, it shows the progress bar value below the bar.
Name
value
Type
Number
Default
n/a
Description
Required. A value between 0 and 100 representing the progress.
Name
valueClass
Type
String
Default
''
Description
Allows control of styling for the value displayed when showValue is set to true.