| Table of Contents |
|---|
Description
Progress indicators express show that an operation is in progress, and display an unspecified wait time or display the current completed ratio of a process or actionthe operation.
 |
Types
Linear & Circular
LUX offers There are two visually-distinct variations types of progress indicatorsindicator: linear and circular progress indicators.
Only one type should represent each kind of activity in an application. 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 | Linear progress indicators are often referred to as a Progress bar. Determinate indicators are for operations in which where the length of the process is known. They display the The indicator increasing increases in width from 0 to 100% of the track, in sync with the process’s progress. Indeterminate indicators are for operations in which where the length of the process is not known. They display the The indicator is 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 | Circular progress indicators are often referred to as a Progress spinner. Determinate indicators are for operations in which where the length of the process is known. They fill the invisible, circular track with colour, as the indicator moves from 0 to 360 degrees. Indeterminate indicators are for operations in which where the length of the process is not known. They continuously animate along the invisible circular track until the process is complete. They can be applied directly to a surfacean element, such as a button or card. |
|
...
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 application's state and indicate available actions, such as whether users can navigate away from the current screen.
...
A circular indicator can be integrated into a button or actionable icon to express show a connection between an interaction and a specific item. They are typically used to express show when an interaction is not available, such as clicking a repeated click of a button again, is not available. They should be used for short, indeterminate activities (between 2-5 seconds).
General guidelines
Structure
Linear progress Progress indicators are composed consist of two required elements:
...
A track. The fixed area which the indicator bar
...
travels along. For circular indicators, the track is invisible.
...
...
The
...
indicator bar. The animated colored area which moves along the track.
...
Placement and Positioning
...
|  |
| |
When integrated to form elements (e.g. such as file upload), it may be placed to the right of the label\ field pairit relates to. It may also be placed underneath the field depending on available screen real estate space or responsive design. |  |
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 that the screen content (is loading, and that no interaction is possible until complete)the process is completed.
A circular progress indicator at the center of component, such as a button, indicates that the process applies to that particular item (, and that interaction with the rest of the UI is possible).
<< Add screenshot >>
Default State
Determinate linear progress indicators may be hidden or shown in their empty state by default
...
. When shown, they can indicate that an action may be a lengthy operation.
...
For example,
...
a form
...
submission which is expected to take several minutes to complete should show the linear progress indicator in its empty state to set
...
the user’s expectations.
Indeterminate linear progress indicators should be hidden by default and only appear
...
once active.
...
On completion, the linear progress indicator should
...
be hidden again, and in most cases replaced by the content that was loaded or a post-completion message.
Circular progress indicators should be hidden by default and only appear
...
once active.
...
On completion, the circular progress indicator should
...
be hidden again, and in most cases replaced by the content that was loaded. In the case of integration with a component
...
such as a button, the button is returned to
...
its default state.
States
There are none of the traditional Common states such as hover, active, focused and errorstates for linear do not apply to progress indicators, as user interaction is not applicablepossible.
Linear
State | Determinate | Indeterminate |
|---|---|---|
Empty |  | |
Partially complete |  |  |
Complete |  | |
Disabled | | |
Circular
State | Determinate | Indeterminate |
|---|---|---|
Empty |  | |
Partially complete |  |  |
Complete |  | |
Disabled | | |
...
Progress indicators do not support user interaction, they . They are solely used to provide a visual status indicator. The exception to this is where circular progress indicators are integrated into a button with a built-in cancel operation.
Best practices
Don’t stop a progress indicator
...
. Users develop an expectation for how fast the action is being processed.
...
Any unexpected freezes will be noticed and will impact user satisfaction. The worst possible case is when a progress indicator approaches 99% and suddenly stops. Most users will be frustrated by this behaviour because it makes them think the app is frozen. You can disguise small delays in your progress indicator by moving it instantly and steadily.
Explain why the user is waiting
...
. If users are informed, they may be more patient.
...
Add additional text to tell the user what is happening or
...
explain why they are waiting.
Provide a general time estimate for time-consuming tasks
...
. Don’t try to be exact
...
: This might take five
...
minutes can be enough
...
to encourage users
...
to wait
...
.
Make sure that long operations offer the ability to cancel during the process.
...
Don’t use vertical linear indicators
...
. A horizontal linear
...
indicator is
...
easier to visualize
...
, and reduces the cognitive load
...
.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Content authors should provide values of aria-valuemin, aria-valuemax, and aria-valuenow where the aria-valuemax is known. Further guidelines for optimum compliance can be found at ARIA progressbar role.
...