ProgressBar is a process status indicator.
import ProgressBar from 'primevue/progressbar';
ProgressBar is used with the value property.
<ProgressBar :value="50"></ProgressBar>
Value is reactive so updating it dynamically changes the bar as well.
<ProgressBar :value="value"></ProgressBar>
Custom content inside the ProgressBar is defined with the default slot.
<ProgressBar :value="40"> {{ value }}/100 </ProgressBar>
For progresses with no value to track, set the mode property to indeterminate.
<ProgressBar mode="indeterminate" style="height: 6px"></ProgressBar>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-progressbar | Container element. |
| p-progressbar-determinate | Container element of a determinate progressbar. |
| p-progressbar-indeterminate | Container element of an indeterminate progressbar. |
| p-progressbar-value | Element whose width changes according to value. |
| p-progressbar-label | Label element that displays the current value. |
ProgressBar components uses progressbar role along with aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and aria-label props.
<span id="label_status" />
<ProgressBar aria-labelledby="label_status" />
<ProgressBar aria-label="Status" />
Not applicable.