Loading Spinner

Overview#

A loading spinner component acts as feedback to the user to indicate the system is working in the background after an action has been performed.

Design Guidelines#

Use when#

  • Use inside a component (buttons, dropdown, input fields, select fields) when the system needs time to fetch the next action from said component.
  • Use at the bottom of an infinite scroll list when more data needs to be fetched.
  • Use when the system is unable to determine with certainty what layout and components are used once the screen loads. If the system can determine layout / components - use the skeleton component instead.

Don't use when#

  • Do not use when an interface of a component or page needs time to load, use the skeleton component instead.

Visual Style#

  • Utilize the Ant Design Custom Spinner in all cases.
  • In input fields and select fields, the loading spinner replaces the icon on the far right side
  • In buttons, the loading spinner is located to the left of the button text
  • Use charcoal-base colour within input fields, select fields, loading messages and default buttons. Use blue-base colour with text link spinners and infinite scrolling list spinners. Use white-base colour against primary, danger and success buttons. See the Colour Palette

Editorial#

  • Do not use any text with a stand alone spinner
  • Do not change the component text when the spinner appears. See Design Decision

Behaviour#

  • Appear and begin spinning one second after prior action has been performed (When the app takes more than 0.1 second but less than one second to respond to user input, it feels like the app is causing the result to appear).
  • Spin forwards and continuously until system has finished loading

Accessibility#

  • Ensure correct colour has been utilized (see Visual Style to pass contrast ratio guidelines)

Related components#

Example 1 - Input#

Example 2 - Select#

Example 3 - Loading Message#

Open in Storybook

Example 4 - Buttons & Links#

Example 5 - Infinite Scrolling Lists#

Example link to follow when design decision has been completed

Edit this page
Last updated on by Paulo Andrade