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%


<p-progressBar [value]="50"></p-progressBar>

Dynamic #

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

100%


<p-progressBar [value]="value"></p-progressBar>

Indeterminate #

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



<p-progressBar mode="indeterminate" [style]="{ height: '6px' }"></p-progressBar>

Style #

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

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>

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

Keyboard Support

Not applicable.

PrimeNG 16.0.0-rc.2 by PrimeTek