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
<< Short description of the component and when it is used >>Progress bars express an unspecified wait time or display the current completed ratio of a process or action.
<< Most communicative screenshot of the component >>
...
<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >>
Types
<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case each type should be described in a sub-page >>
<<If you are using this section Usage & Behaviour should be used only for the Common functionalities in the page>>
| Type | Usage | Image |
|---|---|---|
<< Link to the relevant page >> Determinate | For operations in which the length of the process is known. Determinate operations display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress. | |
<< Link to the relevant page >> Indeterminate | For operations in which the length of the process is not known. Indeterminate operations display the indicator continually growing and shrinking along the track until the process is complete. |
Usage & Behaviour
<< Use a visual for each sub-section >>
Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen.
General guidelines
<< Describes the component, use sub-section when they are relevant to the components >>
...