Switch to WilmingtonProgress and Loading
Progress and loading let a user know the level of completion of a task or process. Visual indicators should be used when background operations are underway or to provide wayfinding as users progress through a multi-step process. If you need to communicate details about a singular step in the process, consider the status guidelines.
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 bar in the step guide pattern. The bar shows linear progress that updates in response to the user input.
For system-controlled actions:
When a user initiates a task that requires a back-end call, use one of the below system-controlled indicators.
Skeleton Loader
Skeleton loaders are a sophisticated wait animation that give the user an abstract idea of the content they are about to see. use skeleton loaders when loading new information in a layout and only when the format of the information is known beforehand. If the shape of the loader is vastly different from the loaded content, it will cause a jarring experience for the user. Do not use skeleton loaders for asynchronous or regional loading.
Action Indicator
Use the full-page variant of the action indicator component when loading information whose layout is unknown. Instead of giving the user a glimpse into the layout of new content, the action indicator uses copy to let the user know the system's status. It is the only indicator that can explicitly tell the user what is happening. The full-page action indicator appears in the center of the page or over a specific content region. Use the non-blocking variant of the action indicator to let the user know of an asynchronous action, such as autosaving.
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.