Loading

When information takes a longer amount of time to appear on-screen, loading patterns provide feedback that information is still processing and that the screen is not frozen.

Guidance

  • Loading patterns leverage motion to give the feeling of speed and, when used correctly, have been proven to make wait times more bearable by shifting focus to the loading indicator rather than the wait time.
  • The right loading animations can therefore help make the user’s perceived wait time shorter than the objective loading time.

Response Time Guide

Although we recommend loading times below, we acknowledge that certain factors out of our control such as poor connection speed and the browser used can lead to significantly slower response times.

Loading TimeAvailable UI SolutionsIntent and Reasoning
< 1 secondNo feedback necessaryIn this timeframe, the user should still feel like the result was loaded instantaneously without any loading indicators. For anything that takes less than 1 second to load, loading animations can trigger anxiety as the user isn’t able to register the change of state from visual indicator to actual content.
> 1 second

Loading Dots

Skeleton

Progress Bar

Loading animations are explicitly recommended by Nielsen-Norman to shorten the amount of perceived wait time and reassure the user of progress. Refer to the section on UI Solutions below for more details on which solution to use for your use case.

Predictable or Variable Elements

Although loading animations can be helpful in reducing a user’s perception of wait time, too much movement can produce a jarring experience for the user. As detailed in the Usage section, Skeleton leverages simple shapes to act as placeholders when the content being loaded is predictable. Meanwhile, Loading Dots are a good default solution for loading content that may vary between users, such as loading a data visualization in a card. For one user, the data visualization may be a line chart while others may see a donut chart. Considering whether the content will be predictable will help you choose the right solution for your use case.

Accessibility Considerations

  • A screen reader should always communicate system status to the user such as when loading is taking place.
  • Some users become distracted or experience negative side-effects from animated content, such as dizziness or nausea. According to the WCAG guidelines, users should be allowed to turn off non-essential motion such as loading animations, or any animation should stop after five seconds.
  • The colour contrast of a loading animation must have a minimum ratio of 3.1 with its adjacent colours.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section