Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Loaders

Loaders and spinners are used when a page, function or other content, is loading.

Guidelines

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.

Related components

Subsections

Page last updated

Feedback

Was this page helpful?