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.
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.
Sample | Property | Sample value |
---|---|---|
bodyTextSecondaryColor
Medium dark text color used for secondary or muted content in layouts |
#64707DFF
|