Ready

Progress Bar

Progress bars communicate the working status of a user-initiated action. Progress bars support values between 0% and 100%.

Ready

Progress Bar

Progress bars communicate the working status of a user-initiated action. Progress bars support values between 0% and 100%.

Ready

Progress Bar

Progress bars communicate the working status of a user-initiated action. Progress bars support values between 0% and 100%.

States

States

States

  1. Default: Action is in progress

  2. Indeterminate: The system is currently unable to display action progress

  3. Warning: Total progress is complete but certain actions were not able to be completed

  4. Error: An error has occurred and no actions were completed

Best Practices

Best Practices

Best Practices

1. User Initiated

The progress bar is used for user-initiated actions that take longer than 1 second.¹ ² The progress bar should not be used for content loading. See Loader.

2. Label

The progress bar should include a label that describes the action being performed.

3. Multiple Actions

The progress bar should not be used to communicate the working status of multiple actions at once.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies