ProgressBar

Basic

Set a value between 0 and 100 to display the completed percentage.

Dynamic

Start a simulated export. Pause and resume it, or reset to begin again.

Template

Use a content template to replace the percentage with your own text.

Indeterminate

Use an animated bar when the amount of remaining work is unknown. Animation respects reduced motion preferences.

Appearance

Hide the label for a compact indicator, or customize the color and height.

Usage and API

import { AvProgressBar } from 'avero-ui';

<av-progress-bar [value]="50" aria-label="Upload progress" />
<av-progress-bar [value]="value()" aria-label="Export progress" />
<av-progress-bar [value]="50" aria-label="Items processed" aria-valuetext="50 of 100 items">
  <ng-template #content let-value>{{ value }}/100</ng-template>
</av-progress-bar>
<av-progress-bar mode="indeterminate" style="height: 6px" aria-label="Loading" />

Import AvProgressBar. Inputs are value (default 0), mode (determinate or indeterminate), showValue (default true), unit (default %) and color. Values are clamped to 0–100; null, undefined and non-finite numbers become 0. The #content template receives the normalized value.

The component exposes the progressbar role with minimum and maximum values. Indeterminate mode omits aria-valuenow and hides the label. Supply aria-label or aria-labelledby and, when useful, aria-valuetext for a custom description. Progress indicators do not receive keyboard focus.

Customize --av-progress-bar-height, --av-progress-bar-radius, --av-progress-bar-background, --av-progress-bar-fill and --av-progress-bar-label-color. Reference: PrimeNG ProgressBar.