1.7 KiB
<mat-progress-bar> is a horizontal progress-bar for indicating progress and activity.
Progress mode
The progress-bar supports four modes: determinate, indeterminate, buffer and query.
Determinate
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.
Indeterminate
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.
Buffer
Use the buffer mode of the progress-bar to indicate some activity or loading from the server.
In "buffer" mode, value determines the progress of the primary bar while the bufferValue is
used to show the additional buffering progress.
Query
Use the query mode of the progress-bar to indicate pre-loading before the actual loading starts.
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.
Accessibility
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.