ProgressBar is a process status indicator.
import { ProgressBarModule } from 'primeng/progressbar';
// For dynamic progressbar demo
import { ToastModule } from 'primeng/toast';
ProgressBar is used with the value property.
<p-progressBar [value]="50"></p-progressBar>
Value is reactive so updating it dynamically changes the bar as well.
<p-progressBar [value]="value"></p-progressBar>
For progresses with no value to track, set the mode property to indeterminate.
<p-progressBar mode="indeterminate" [style]="{ height: '6px' }"></p-progressBar>
content template allows displaying custom content inside the progressbar.
<p-progressBar [value]="50">
<ng-template pTemplate="content" let-value>
<span>{{value}}/100</span>
</ng-template>
</p-progressBar>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-progressbar | Container element. |
| p-progressbar-determinate | Container element of a determinate progressbar. |
| p-progressbar-indeterminate | Container element of an indeterminate progressbar. |
| p-progressbar-value | Element whose width changes according to value. |
| p-progressbar-label | Label element that displays the current value. |
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>
Not applicable.
API defines helper props, events and others for the PrimeNG ProgressBar module.
ProgressBar is a process status indicator.
Defines the input properties of the component.
Defines the templates used by the component.