Components

Progress Bar

Angular Material Progress Bar is a horizontal indicator that displays the progress of a task or process. It comes in four modes: determinate, indeterminate, buffer and query. BuilderKit restyles the track and the indicator so the bar matches the rest of the design system.

Official docs API reference

For progress that belongs to a single action rather than the page, the button component renders its own indicator inside the button.

Example

Below is an example of how BuilderKit restyles the Angular Material Progress Bar and gives it a more modern appearance.

<mat-progress-bar mode="buffer" />

<mat-progress-bar mode="determinate" value="40" />

Determinate progress with a bound value

A determinate bar fills to the share of the work that is done, and animates smoothly as that share moves up or down.

40%

<mat-progress-bar mode="determinate" [value]="progress()" />

Buffer mode

Buffer mode shows a second, lighter indicator ahead of the confirmed progress, together with a dotted track for the part that is still untouched.

<mat-progress-bar mode="buffer" value="35" bufferValue="70" />