Progress

Make loading content in your app as delightful and painless as possible by minimizing the amount of visual change a user sees before they can view and interact with content.

Structure

Variations

Circular

Circular progress indicators should be used for loading content where the percentage of the operation completed cannot be ascertained.

Inline

Inline progress indicators allow for the indicator to be used next to other items.

Center

Centered progress indicators will vertically center the indicator to the page.

Small

Small progress indicators can be used inline next to a card title or a checkbox switch.

Linear

For operations where the percentage of the operation completed can be ascertained, use a linear progress indicator to give the user a quick idea of how long the action will take.

Progress helper

A helper may be added next to the indicator to display the value of the progress.

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.