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>

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.