47 lines
1.7 KiB
Markdown
47 lines
1.7 KiB
Markdown
|
`<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.
|
|||
|
|
|
|||
|
|
<!-- example(progress-bar-determinate) -->
|
|||
|
|
|
|||
|
|
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.
|
|||
|
|
|
|||
|
|
<!-- example(progress-bar-indeterminate) -->
|
|||
|
|
|
|||
|
|
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.
|
|||
|
|
|
|||
|
|
<!-- example(progress-bar-buffer) -->
|
|||
|
|
|
|||
|
|
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.
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- example(progress-bar-query) -->
|
|||
|
|
|
|||
|
|
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.
|