Also known as:
SpinnerLoaderProgress indicatorsCircular indicatorsIndeterminate indicators

Loading Spinner

An animated element that indicates loading is in process and where it will appear when loading data is slow.

AnchorNeed to know

  • This has been designed but not built.
  • Give people an idea of what’s happening when a small content/data item takes less than 10s to load.

Visuals

To keep in mind

  • A loading spinner is generally a branded element with a looping animation that indicates loading is in process and where it will appear.
  • The loading spinner accessibility label needs to describe the state of the loading element e.g. “Loading”, “Saving”, “Processing.”
  • You might avoid “jank” using CSS animations.

When to use

  • For a tiny, inline action or feedback, e.g. clicked a button and the action will take time.
  • For fast processes that take less than 300ms, consider a spinner or no loading state at all.
  • When data takes less than 10s to load on an average connection for our user base.
  • For low-traffic pages such as super-user only admin pages.

When not to use

  • When there’s more than 1 element loading, use a loading skeleton instead.
  • For a long-running process or background process, e.g. importing data or exporting reports, use a progress bar (link to come) instead.
  • For high-traffic pages like our account dashboard, use a loading skeleton.
  • For introducing content with flair, use a choreographed or stylized entrance. In contrast to a placeholder loading skeleton, choreographed or stylized entrances don’t care how long content takes to load. For example, the whole page might be loaded already, but we only reveal each section with a fade as the person scrolls down the page. A single stylized entrance may mask and replace a loading spinner.

External Links