Skip to main content
react-md - Progress - Demos

Simple Indeterminate Examples

The biggest use case for the progress components is to show a loading indicator while you are waiting for:

  • part of a page to load
  • an API call to finish
  • some other async task

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.


Simple Determinate Examples

Another use case for the progress components is to show the current progress for:

  • downloading files
  • uploading files
  • progress of finishing a task
  • etc

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.

Small Circular Progress

The CircularProgress also supports a small state which defaults to the same size as icons from the @react-md/icon package.

With Suspense

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.

My files

Within Buttons

Since the progress bars are rendered using <span>s, you can also render them within buttons. They can be placed using the TextIconSpacing component or as an overlay. When using the CircularProgress within buttons, you'll want to update the size as well using the rmd-progress-theme-update-var mixin so that it can fit correctly within a button.

The example below will show how you can use the CircularProgress as the icons within a Button as well as using the LinearProgress and CircularProgress as an overlay.

Circular Before
Circular After
Circular Overlay
Linear Overlay