Progress
Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process.
Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.
- Determinate indicators display how long an operation will take.
- Indeterminate indicators visualize an unspecified wait time.
The animations of the components rely on CSS as much as possible to work even before the JavaScript is loaded.
Circular custom scale
By default, progress values are expected in the 0–100 range. You can customize this range by using the min and max props.
Uploading photos…
10%
Linear with custom value text
By default, the progress value is read by assistive technology as percentages. Use aria-valuetext when the progress value does not involve percentages.
Elevator status
Elevator at floor 1 out of 10.
Customization
Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.
Delaying appearance
There are 3 important limits to know around response time.
The ripple effect of the ButtonBase component ensures that the user feels that the UI is reacting instantaneously.
Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second.
After 1.0 second, you can display a loader to keep user's flow of thought uninterrupted.
Accessibility
Progress bars must be given an accessible name by either setting aria-labelledby that points to the id of a visible text label, or using the aria-label attribute.
Limitations
High CPU load
Under heavy load, you might lose the stroke dash animation or see random CircularProgress ring widths.
You should run processor intensive operations in a web worker or by batch in order not to block the main rendering thread.
When it's not possible, you can leverage the disableShrink prop to mitigate the issue.
See this issue.
High frequency updates
The LinearProgress uses a transition on the CSS transform property to provide a smooth update between different values.
The default transition duration is 200ms.
In the event a parent component updates the value prop too quickly, you will at least experience a 200ms delay between the re-render and the progress bar fully updated.
If you need to perform 30 re-renders per second or more, we recommend disabling the transition:
.MuiLinearProgress-bar {
transition: none;
}
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.