...
Progress indicators express an unspecified wait time or display the current completed ratio of a process or action.
...
Types
Linear & 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 |
|---|---|---|
Linear progress indicators display process by visualizing an indicator increasing in width from 0 to 100% of a track. This is animated in sync with the process’s progress. The behaviour of the indicator is dependent on whether the progress of a process is known. They can be applied to the entire page, large containers and to form elements. |     | |
Circular progress indicators display progress by animating an indicator along a 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
...