Lead: << Your name/s >> << Select the status -
| Status | ||||
|---|---|---|---|---|
|
| Status | ||
|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
Related Pages: << Links to related pages, if relevant >>
| Table of Contents |
|---|
Description
Progress indicators express an unspecified wait time or display the current completed ratio of a process or action.
...
Types
Linear and circular
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 app. 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 app.
Type | Usage | Image | ||
|---|---|---|---|---|
DeterminateLinear Progress Indicator | 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. |  | 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. |
 | 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. |
Usage & Behaviour
Progress indicators inform users about the status of ongoing processes, such as loading a page, submitting a form, or saving updates. They communicate an applications state and indicate available actions, such as whether users can navigate away from the current screen.
...