Skip to main content

Progress Bars

Progress indicators express an unspecified wait time or display the length of a process.

Progress Indicators


Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen. Progress indicators generally have negative connotations among users. Use them sparingly. Instead, focus on optimizing loading.


Use when

  • You want to reduce a user’s uncertainty. Reassure the user that your app/ website is working.
  • You want to reduce the user’s perception of time and offer them a reason to wait.

Don’t use when

  • You want to indicate progress inside smaller elements, such as buttons, chips, or badges.
What's changed
Date Version Notes Contributors
01/16/2023 1.0.0 New component added. D. Bedick, E. Bohn, N. Cadsawan, E. Gunther, I. Perez, J. A. Provin Silva, L. Saenz, C. Starbird, R. Stillwell, S. Kaukonen, N. Byati