Progress bar

Overview for progress-bar

<mat-progress-bar> is a horizontal progress-bar for indicating progress and activity.

The progress-bar supports four modes: determinate, indeterminate, buffer and query.

Operations where the percentage of the operation complete is known should use the determinate indicator.

Determinate progress-bar

This is the default mode and the progress is represented by the value property.

Operations where the user is asked to wait while something finishes and it’s not necessary to indicate how long it will take should use the indeterminate indicator.

Indeterminate progress-bar

In this mode the value property is ignored.

Operations where the user wants to indicate some activity or loading from the server, use the buffer indicator.

Buffer progress-bar

In "buffer" mode, value determines the progress of the primary bar while the bufferValue is used to show the additional buffering progress.

For situations where the user wants to indicate pre-loading (until the loading can actually be made), use the query indicator.

Query progress-bar

In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response progress is available, the mode should be changed to determinate to convey the progress. In this mode the value property is ignored.

The color of a progress-bar can be changed by using the color property. By default, progress-bars use the theme's primary color. This can be changed to 'accent' or 'warn'.

Each progress bar should be given a meaningful label via aria-label or aria-labelledby.