ProgressBar is a process status indicator.
import { ProgressBar } from 'primeng/progressbar';
// For dynamic progressbar demo
import { ToastModule } from 'primeng/toast';
ProgressBar is used with the value property.
<p-progressbar [value]="50" />
Value is reactive so updating it dynamically changes the bar as well.
<p-progressbar [value]="value" />
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>
For progresses with no value to track, set the mode property to indeterminate.
<p-progressbar mode="indeterminate" [style]="{ height: '6px' }" />
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" />
Not applicable.