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.
10%
Non-standard ranges
The progress components accept a value in the range 0 - 100. This simplifies things for screen-reader users, where these are the default min / max values. Sometimes, however, you might be working with a data source where the values fall outside this range. Here's how you can easily transform a value in any range to a scale of 0 - 100:
<span class="token comment">// MIN = Minimum expected value</span>
<span class="token comment">// MAX = Maximum expected value</span>
<span class="token comment">// Function to normalise the values (MIN / MAX could be integrated)</span>
<span class="token keyword">const</span> <span class="token function-variable function">normalise</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">(</span>value <span class="token operator">-</span> <span class="token constant">MIN</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token punctuation">(</span><span class="token constant">MAX</span> <span class="token operator">-</span> <span class="token constant">MIN</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Example component that utilizes the `normalise` function at the point of render.</span>
<span class="token keyword">function</span> <span class="token function">Progress</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">React.Fragment</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CircularProgress</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>determinate<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">normalise</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">LinearProgress</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>determinate<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">normalise</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">React.Fragment</span></span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
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 system 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.
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:
<span class="token selector">.MuiLinearProgress-bar</span> <span class="token punctuation">{</span>
<span class="token property">transition</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
IE 11
The circular progress component animation on IE 11 is degraded.
The stroke dash animation is not working (equivalent to disableShrink) and the circular animation wobbles.
You can solve the latter with:
<span class="token selector">.MuiCircularProgress-indeterminate</span> <span class="token punctuation">{</span>
<span class="token property">animation</span><span class="token punctuation">:</span> circular-rotate 1.4s linear infinite<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> circular-rotate</span> <span class="token punctuation">{</span>
<span class="token selector">0%</span> <span class="token punctuation">{</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* Fix IE11 wobbly */</span>
<span class="token property">transform-origin</span><span class="token punctuation">:</span> 50% 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">100%</span> <span class="token punctuation">{</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>