Short description

Loaders and spinners communicate to the user that their action is being processed, without telling them what is happening in the back end.

When and how to use it

Use it when an action is taking time to process, for example when retrieving data, performing a calculation, viewing a page, or downloading or uploading files.

A spinner is a subset of loaders, since a spinner communicates that something is loading. A skeleton loader or a spinner on a page communicates for example that the content is loading and being retrieved, and that the screen is not frozen.

Do's and don'ts

• Use progress bar to provide feedback when we have an estimated time for the loading process to be completed, or when it is possible to visualise the remaining time in contrast to time spent.
• Use a spinner or skeleton loader to provide feedback that content is loading, but when we don’t have a time estimate.
• Combine a progress bar or a spinner in a modal with text if there is something important to communicate to the user, for example what we are doing or if they must stay on the page for the process to finish.
• Use a screen reader to communicate loading, and let the user know when the process is completed (or failed!).

• A loader communicates that content is being loaded, but don't use it to communicate that an element itself is loading. For example, content inside a slide out or a modal can have a loading component, but the slide out or modal itself should not be displayed as loading.
• Don't use a loader or spinner with text, if the action is too short for the user to have time to read it.