Linear Progress

Minimize visual changes that occur while your app loads content by representing each operation with a single activity indicator. For example, a refresh operation should display either a refresh bar or an activity circle, but not both.

When using a progress bar, it is recommended to follow the guide for the Progress Bar Role.

TL;DR: If the progressbar is describing the loading progress of a particular region of a page, the author SHOULD use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading. It is not possible for the user to alter the value of a progressbar because it is always readonly.

linkOther Examples

The FileUpload examples are also another good resource for looking at using progress bars.

linkProgress Types

LinearProgress bars come in three types: indeterminate, determinate, and query-indeterminate. Indeterminate progress bars should be used when it is unknown how long the action should take while the determinate should be used when the action's progress is measurable. Query Indeterminate progress bars are used when the action happens in two stages, one where the action length is not measurable and then the second part is measurable;

Indeterminate Examplelink

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.

network_wifinetwork_cellbattery_full12:30

Title

Content 1

Determinatelink

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 value prop.

network_wifinetwork_cellbattery_full12:30

Title

Content 1

Query Indeterminatelink

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:

  1. Render the LinearProgress with query={true} and the value prop to either null or undefined
  2. Once the "measurable" progress can begin, set the value prop to your progress amount and keep incrementing until it reaches 100.

Additional Styling Controllink

If it is desired to have additional control over the progress bar's style, you can use the progressStyle and progressClassName 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.