ProgressBar

ProgressBar is a process status indicator.

Import #

import { ProgressBarModule } from 'primeng/progressbar';
// For dynamic progressbar demo
import { ToastModule } from 'primeng/toast';

Basic #

ProgressBar is used with the value property.

50%

Dynamic #

Value is reactive so updating it dynamically changes the bar as well.

Template #

content template allows displaying custom content inside the progressbar.

50/100

Indeterminate #

For progresses with no value to track, set the mode property to indeterminate.

Accessibility #

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>
<p-progressbar aria-labelledby="label_status" />

<p-progressbar aria-label="Status" />

Keyboard Support

Not applicable.

Figma UI Kit

The official Figma UI Kit for Prime UI libraries, the essential resource for designing with PrimeOne components.