ProgressBar

ProgressBar is a process status indicator.


import ProgressBar from 'primevue/progressbar';

ProgressBar is used with the value property.

50%


<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.

40/100


<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.

NameElement
p-progressbarContainer element.
p-progressbar-determinateContainer element of a determinate progressbar.
p-progressbar-indeterminateContainer element of an indeterminate progressbar.
p-progressbar-valueElement whose width changes according to value.
p-progressbar-labelLabel element that displays the current value.

Screen Reader

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" />

Keyboard Support

Not applicable.