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.

Use the buffer mode of the progress-bar to indicate some activity or loading from the server.

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.

Use the query mode of the progress-bar to indicate pre-loading before the actual loading starts.

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.

MatProgressBar implements the ARIA role="progressbar" pattern. By default, the progress bar sets aria-valuemin to 0 and aria-valuemax to 100. Avoid changing these values, as this may cause incompatibility with some assistive technology.

Always provide an accessible label via aria-label or aria-labelledby for each progress bar.

Azure & Blue theme selected.