Lead: << Your name/s >> << Select the status - Status colour Yellow title ongoing Status colour Grey title Waiting Status colour Blue title Done Status colour Green title published
>>Status colour Red title on hold
Related Pages: << Links to related pages, if relevant >>
| Table of Contents |
|---|
Description
...
Progress bars inform users about the status of ongoing processes, such as loading an appa page, submitting a form, or saving updates. They communicate an app’s applications state and indicate available actions, such as whether users can navigate away from the current screen.
...
<< In case of a complex component duplicate this section, describing each sub-component separately >>
Structure
...
Linear progress indicators are composed of two required elements:
- Track - The track is a fixed width rule, with set boundaries for the indicator bar to travel along.
- Indicator Bar - The bar animates along the length of the track.
Placement and Positioning
The placement of a progress indicator can indicate the scope of a process. Progress bars should only be placed at the top or in the center of a container or component. For example
...
Default State
- When there is more than one state for a control or area
Content
- Including labels, microcopy, number of items, order of items, default values etc.
Internal Logic
...
:
- A progress bar at the center of the screen should indicate loading all screen content (and that no interaction is possible until complete)
- A progress bar attached to the top a container, such as a card indicates the process applies to that particular item (and that interaction with the rest of the UI is possible)
Default State
Progress bars should be hidden by default and only appear on screen when they are active. Once complete, the progress bar should return to it's default state (removed from view) in most cases replaced by the content that was loaded.
States
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
...