As stated above,
indeterminate progress bars should be used when an action's progress can not be measurable.
This example will show how you can create a fake feed of data and show a progress indicator while that data is
being "fetched" from a server or if the page was refreshed.
This example is basically the same as above. The only difference is that the progress will now be "measurable". This
will update the progress so that it does not spin infinitely and will grow related to its
The query indeterminate progress is only available on
LinearProgress. It will display a "reverse" loading indicator
until a progress value has been applied to the progress bar.
Since the example below isn't really the best example of a real world example, here are the steps that are happening:
- Render the
valueprop to either
- Once the "measurable" progress can begin, set the
valueprop to your progress amount and keep incrementing until it reaches
If it is desired to have additional control over the progress bar's style, you can use the
props. These two props can either be a static style object or className that gets applied to the progress bar, or they can be functions
that return the style or className based on the current value.