Lead: << Your name/s >> << Select the status -
| Status | ||||
|---|---|---|---|---|
|
| Status | ||
|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
Related Pages: << Links to related pages, if relevant >>
| Table of Contents |
|---|
Description
...
Type | Usage | Image |
|---|---|---|
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. Linear progress indicators are ideal for longer activities (more than 10 seconds). |  | |
Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. The behaviour of the indicator is dependent on whether the progress of a process is known. They can be applied directly to a surface, such as a button or card. |
...
The placement of a progress indicator can indicate the scope of a process. Progress bars indicators should only be placed at the top or in the center of a container or component . For example:
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)
depending on the type of indicator.
Default State
Progress bars indicators 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.
...
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
Interaction
Progress bars indicators don not support user interaction, they are solely used to provide a visual status indicator.
...