Loading

Progress and loading let a user know the level of completion of a task or process. Visual indicators are used when background operations are underway to provide wayfinding for a user as they progress through a multi-step process. Using indicators well has a positive impact on the perceived speed of an experience as they make the user focus on progress rather than on wait-time. The type of indicator you use will be dependent on what the user is waiting for. Follow these guidelines to determine which type of indicator is needed.

Types of Indicators

For user-controlled actions:

To give the user an idea of how much of a task they have completed, use a user-controlled indicator such as the progress tracker component. The highlighted steps show linear progress that updates in response to the user input or actions.

For system-controlled actions:

When a user initiates a task that requires a back-end call, use one of the below system-controlled indicators.

Spinner

Use a spinner when loading information whose layout is unknown. Use the variant that allows for copy to let the user know the system's exact status or give insight into what they're waiting for.

Ellipsis

Use this wait animation only in button loading states or to indicate communication in a chat window. Show the loading state of a button when the layout will not change to accommodate the new content but there is a significant wait for a back-end call (e.g. when submitting information in a form) or when new content follows the same pattern as previous content (e.g. loading more search results).

When choosing which loading indicator to use, consider whether the layout will change, if the new layout is known or unknown and if you need to communicate the specific action with the user.

Determinate and Indeterminate Loading

Determinate loaders animate based on how long it will take to complete a task. Indeterminate loaders animate cyclically to let a user know that a task is underway, but give no indication of when the task may be completed. When possible, use determinate loaders, especially for longer tasks. Using indeterminate loaders for long periods can lead users to believe that something has gone wrong.