There are two types of indicators/bars:
- Determinate. Indicating the percentage of loaded content. (Indicating progress, 0-100%)
- Indeterminate. Does not show how long nor how much of the content is loaded. (Requesting info)
An indeterminate progress indicator can result into a determinate state, but not the other way around.
When and how to use it
A determinate progress indicator can be used to show actual progress in a multipage flow (wizard) when viewport size is limited.
Use an indeterminate indicator when loading content within a page, widget or module.
Multiple indicators can be shown at the same time to indicate that different content areas are loading. They can also be queued in a sequence to show how additional content is loading, i.e. when expanding a row to show its details.
Progress indicators should behave the same way regardless of device or resolution.
Do's and don'ts
- Use a progress indicator to give the user a visual cue when content is loading
- Add a determinate indicator as part of input field validation, enforcing the understanding of when the requested value is fulfilled.
- Refrain from adding progress indicators for all sub items, try instead to show one per content area.
- Active line: Green
- Inactive line: Grey 8