...
LUX offers two visually distinct variations of progress indicators: linear and circular progress indicators. Only one type should represent each kind of activity in an appapplication. For example, if a refresh action displays a circular indicator on one screen, that same action shouldn’t use a linear indicator elsewhere in the application.
Type | Usage | Image |
|---|---|---|
Linear Progress Indicator | Linear progress indicators are often referred to as a Progress bar. They visualize a process by displaying an indicator increasing in width from 0 to 100% of a track. This is animated in sync with the process’s progress. Determinate indicators are for operations in which the length of the process is known. Determinate linear indicators They display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress. Indeterminate indicators are for operations in which the length of the process is not known. Indeterminate linear indicators They display the indicator continuously animated along the track until the process is complete. They can be applied to the entire page, large containers and to form elements. |
|
Circular Progress Indicator | Circular progress indicators are often referred to as a Progress spinner. They visualize a progress by animating an indicator along a circular track in a clockwise direction. Determinate indicators are for operations in which the length of the process is known. Determinate circular indicators They fill the invisible, circular track with colour, as the indicator moves from 0 to 360 degrees. Indeterminate indicators are for operations in which the length of the process is not known. Indeterminate circular indicators They continuously animate along the invisible circular track until the process is complete. They can be applied directly to a surface, such as a button or card. |
|
...
Track - The track is a fixed width horizontal rule, with set boundaries for the indicator bar to travel along.
Indicator Bar - The bar animates along the length of the track.
<< Add screenshots >>
Placement and Positioning
...
A linear progress indicator 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)
A linear progress indicator at the center of the screen should indicate loading all screen content (and that no interaction is possible until complete)
<< add screenshots Add screenshot >>
When integrated to form elements (e.g. file upload), it may be placed to the right of the label\field pair. It may also be placed underneath the field depending on available screen real estate or responsive design.
<< add screnshot Add screenshot >>
A circular progress indicator should only be placed in the center << update when toasts are complete >> of a container or component. For example:
A circular progress indicator at the center of the screen should indicate loading all screen content (and that no interaction is possible until complete)
A circular progress indicator at the center of component, such as a button indicates the process applies to that particular item (and that interaction with the rest of the UI is possible)
<< add Add screenshot >>
Default State
...
Progress indicators do not support user interaction, they are solely used to provide a visual status indicator. They The exception to this is where circular progress indicators are integrated into a button with a built in cancel operation.
...
Zeplin link | Screen thumbnail |
|---|
Code
...
| sanitize | false |
|---|
...
<< Add links >> | << Add screenshots >> |