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.




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


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


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


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


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 specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component


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

Medium dark text color used for secondary or muted content in layouts