Use progress bars to let users know that content is being loaded and will take a determined amount of time.
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.
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.
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.
|Small||Use for smaller components like toggles.|
|Medium||Use the default size next to or within buttons.|
|Large||Use in content panels.|
|X-large||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:
- 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.
- If only a portion of a page displays new content or updates, put the spinner in that part of the page.
- For most other cases, place the spinner where you want the user's attention to be when the system process is finished
- 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