Progress indicators

Progress bars

Use progress bars to let users know that content is being loaded and will take a determined amount of time.

determinate progress bar example

If the system takes several seconds to figure out how long the overall process will take, then use the indeterminate progress bar until there is enough information available to show an accurate progress bar. Never use the spinner in preparation of the progress bar.

indeterminate progress bar example

System processes use an animated progress bar. Although the display of this component is quite flexible, there are some basic common elements:

Length of bar:
This is determined by the available screen space
Process description:
This could be static for the duration of the system process, like "Loading image...", or could change as the process progresses, like "Loading update 2 of 5". Put the description above the progress bar, left-aligned, and truncate it with an ellipsis ('...') if it gets too close to the progress description (below)
Progress description:
Progress description: Put this above the container right-aligned, in the same line as above. The progress description tells the user how much progress has been made, for example: '75%', '34kb of 123kb' etc.

Spinners

Use spinners to let users know that content is being loaded and will take an indeterminate amount of time. You should only use one spinner on a page at a time.

Size Spinner Description
Small small spinner Use for smaller components like toggles.
Medium default medium spinner Use the default size next to or within buttons.
Large large spinner Use in content panels.
X-large extra large spinner Use when large portions of the page are being updated.

The main decisions around spinners are about their trigger and their location on the screen:

Trigger:
If a spinner is triggered by the user clicking a button, put the spinner in the button and disable the button while the spinner is visible.
Location:
If only a portion of a page displays new content or updates, put the spinner in that part of the page.
Focus:
For most other cases, place the spinner where you want the user's attention to be when the system process is finished
Duration:
Only show a spinner if the expected wait time is more than a second
Spinner sizes:
use 'small' to show next to buttons; use 'medium' for small content panels; use 'large' for updates of significant parts of the screen