Progress Bar for Angular

import { AuiProgressBar } from '@absoluteui/angular/progress-bar';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Progress Bar page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { progressBar: { ... } } }) (see Configuration).

Example

import { Component, signal } from '@angular/core';
import { AuiProgressBar } from '@absoluteui/angular/progress-bar';

@Component({
  selector: 'app-upload',
  imports: [AuiProgressBar],
  template: `<aui-progress-bar label="Uploading" [value]="progress()" [tone]="progress() === 100 ? 'success' : 'default'"></aui-progress-bar>`,
})
export class UploadComponent {
  readonly progress = signal<number | null>(null);
}

<aui-progress-bar>

Class AuiProgressBar; template reference #ref="auiProgressBar".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Visible label and accessible name (aria-labelledby).
value	number | null	null	Current value, clamped to [min, max]. null renders an indeterminate bar without aria-valuenow.
min	number	'0'	Minimum value.
max	number	'100'	Maximum value; must be greater than min.
valueText	(value: number, max: number) => string		Custom value text for aria-valuetext and the visible value. Default: localized percentage.
description	string		Help text referenced by aria-describedby.
tone	ProgressBarTone	'default'	Semantic tone; non-default tones add a labelled icon.
icons	Partial<ProgressBarIcons>		Icon slot overrides.
showValue	boolean	true	Render the value text next to the label.
announceComplete	boolean	true	Announce “{label} complete” politely once when the value reaches max.
locale	string	'en-US'	Percentage formatting and message locale.