<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.
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.
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.
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.
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
.