ProgressBar is a process status indicator.

import { ProgressBar } from 'primereact/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 displayValueTemplate property.


<ProgressBar value={40} displayValueTemplate={valueTemplate}></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.

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.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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 usingaria-labelledby and aria-label props.

<span id="label_status">Status</span>
<ProgressBar aria-labelledby="label_status" />

<ProgressBar aria-label="Status" />

Keyboard Support

Not applicable.

Visit the API documentation for detailed information about all the properties, events and methods of the component.