The biggest use case for the progress components is to show a loading indicator while you are waiting for:
Since we can't determine the current progress for these types of events, we can
create indeterministic progress bars by only providing an id to the progress
component. However, you should also update the part of the page or a
component with some additional accessibility props to help assistive
technologies understand that some task us going on behind the scenes. This
package also exports a getProgressA11y util that will generate the
accessibility props as needed for you.
Check out the example below for two simple examples for a linear progress and a circular progress bar that will appear and animate for 10 seconds when the button is pressed and then hide.
Another use case for the progress components is to show the current progress for:
Since most of these items have a set range to operate on, we can make these deterministic and manually set what the current progress is.
To create a deterministic progress component, all that is needed is to provide a
value prop that is between the min and max prop values to calculate a
percentage.
The CircularProgress also supports a small state which defaults to the same
size as icons from the @react-md/icon package.
You can also use the progress components with the React.Suspense component as
a fallback value while waiting for lazy-loaded child components are resolved.
To start the example below, click the floating action button with the download icon to trigger a fake lazy-loading flow.