Progress indication

For each process, always use only one progress indicator at a time.

Use progress indicator if there is something in the view the user has to wait for:

• Will the operation complete in about five seconds or less? If so, use a spinner instead of a progress bar, because displaying a progress bar for such a short duration would be distracting.
• Is an indeterminate progress bar combined with an animation? If so, use just the animation instead. The indeterminate progress bar is effectively a generic animation and adds no value to the animation.
• Do you know the duration and want to show the status of the ongoing activity? Use a determinate progress bar.
• When the duration is not known, use a Spinner.
• Size the progress indicator appropriately in relation to other UI components.

Progress bar (Slider)

Determinate progress bar

Determinate progress bar shows the progress of a task or action that has a know duration; for example, file download. The fill of the track indicates progress being made, and the proportion of filled to unfilled area indicates the time remaining until the task or process has finished. Determinate progress bar is non-interactive.

Indeterminate progress bar Used for operations for which the duration is unknown. For operations that complete in 5 seconds or less. Indeterminate progress bar is non-interactive.

Recommendation: usage of Spinner is preferred over indeterminate progress bar.

Progress bar in list item and in dialog

List item can have a progress bar, to show a list of progress items.

• If the progress list item is used for downloading or updating, a cancel button can be placed next to the progress bar.
• Tapping cancel button dismisses the ongoing download.

Progress bar can be used in dialogs if the ongoing activity can be paused or cancelled.