Source: https://primeng.org/progressbar

PassThrough Attributes just landed ✅Learn More

• SearchK

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

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" />

Dynamic #

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

0%

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

Template #

content template allows displaying custom content inside the progressbar.

50/100

<p-progressbar [value]="50"> <ng-template #content let-value> <span>{{value}}/100</span> </ng-template> </p-progressbar>

Indeterminate #

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

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

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 using_aria-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.

• Import

• Basic

• Dynamic

• Template

• Indeterminate

• Accessibility

Templates

Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.

Learn More

PrimeNG 20.3.0 by PrimeTek