A progress indicator provides feedback to a user regarding loading and waiting states.


The progress component is made up of four elements.

  1. Label
  2. Value
  3. Track
  4. Indicator




Linear progress indicators are the default and best used when multiple progress indicators are present such as a queue of file uploads. The can also be used when vertical space is limited


Circular progress indicators work well in situations where there there is only one progress being displayed in a given context, such as a card’s loading state. They also tend to work better than linear progress indicators when horizontal space is limited.



Small progress indicators should be used to show progress inline with another component or within confined spaces such as card headers.


The medium progress indicator is the default and used when there is ample space available.


Large progress indicators indicate loading within main sections of the interface such as cards and dialogs.


Labels provide context about the loading process being performed. While labels do not have to be visually displayed, each progress indicator must have a label defined in the code for accessibility purposes.


Values provide information about the progress such as percent complete or amount of data loaded. Indeterminate progress indicators do not display a value.

The value can be displayed with or without the label.


Indeterminate progress indicators should be used when the progress cannot be calculated such as syncing processes or reconnecting to a server.

Component tokens

The following component tokens are available for customizing the progress component.

Sample references including the swatch and computed values currently represent the applied light theme.

The token lists can be copied into tabular format for pasting into spreadsheets or other applications. Use these to help you document product-specific customizations or perform fine-grained filters.