Skip to main content

Progress Indicator

Progress Indicators are used to show the completion status of an operation lasting for more than 2 seconds.

Progress Indicators can appear in a new panel, a flyout, under the UI initiating the operation, or even replacing the initial UI, as long as the UI can return if the operation is canceled or stopped.

Types​

  • Progress Indicator without known state - For indicating progress of a continuous event, such as loading a scene where the current state of the process isn't known.
  • Progress Indicator with known state - For indicating progress of a continuous event, such as downloading a file where the current state of the process is known.

Best practices​

Do​

  • Display operation description
  • Show text above and/or below the bar
  • Combine steps of a single operation into one bar

Don't​

  • Use only a single word description
  • Show text to the right or left of the bar
  • Cause progress to "rewind" to show new steps

Layout​

Progress Indicator feature a bar showing total units to completion, and total units finished. The description of the operation appears above the bar, and the status in text appears Centre/below. The description should tell someone exactly what the operation is doing.

Progress Indicator without Known State​

States​

Progress Indicator States

Transitions​

TransitionsFront ViewIsometric View
AppearProgress Appear FrontProgress Appear Perspective
ActiveProgress Active FrontProgress Active Perspective
DisappearProgress Disappear FrontProgress Disappear Perspective

Progress Indicator with Known State​

States​

Progress Indicator with Known State

Transitions​

TransitionsFront ViewIsometric View
AppearText Progress Appear FrontText Progress Appear Perspective
ActiveText Progress Active FrontText Progress Active Perspective
DisappearText Progress Disappear FrontText Progress Disappear Perspective