Components

Loading indicator

The Spinner is a loading indicator symbolised by a looped animation providing visual feedback about the system status when the UI or content is being downloaded

Do's

  • make sure you have a message along with the loading indicator, such as "Loading"
  • use an appropriate size depending on your need (e.g. Large for pool pages or large sections of a page, Medium for forms, Small for components)

Don'ts

  • do not state the processing time if it cannot be reliably estimated
  • do not use it more than once a page, unless it's part of components (small variant)

When to use

  • the page/results will take more than 1 second to load
  • when an action is performed by the user, to show an indication that their request is being handled

When not to use

  • don't use if the delay is less than 1 second