Skip to main content

Spinner

A spinner is a visual element that indicates an ongoing activity or loading progress.

Overview

The purpose of spinners is to communicate activity and progress to users, assuring them that the system is actively working and that their requested action is being processed. They enhance the user experience by reducing uncertainty and providing feedback during waiting periods.

Spinners are commonly used to indicate tasks such as content loading, data retrieval or processing that may require some time.

A spinner component in the middle of a white container on a blue background.

Do's and Don'ts

Do
  • Use a spinner whenever the wait anticipated wait time is between 2 and 5 seconds.
  • Use when retrieving data or performing slow computations to notify the user that their request is being processed.
Don't
  • Avoid showing multiple spinners on a single page.

Anatomy

Number one attached to the spinner component.
  1. Spinner: Visual indicator that continuously animates.

Variations

Brand

Brand variation of the spinner component in orange

Secondary

Secondary variation of the spinner component in black and white

Secondary dark

Secondary dark variation of the spinner component in black and white colour

Inverse

Inverse variation of the spinner component in white and gray colour on a black background

Inverse light

Inverse variation of the spinner component in white and gray colour on a black background

Size

Outlines the spinner sizes that are available, and where they should be used across our products.

SizeHeightWidthUse cases
XLarge48px48pxUse when an entire page requires a spinner
Large32px32px
Medium24px24pxThe default size. We recommend using this size where space allows.
Small20px20pxUse within small components such as buttons or chips, or when there are other space constraints.
XSmall16px16px

Placement

Spinners should always be centred horizontally and vertically within the viewport, container, or component they indicate is loading.

Page

The spinner should be centred in the viewport to indicate a full-page loading state.

Three grey rectange sections with orange spinner placed top right

Section

The spinner should be centred in the loading section to indicate which section is loading.

Inverse light variation of the spinner component

Components

The spinner should be centred within the component to indicate that an action is being processed.


Interactions

Drag on mobile

Mobile devices don't have a hover cursor, so dragging actions might not be the most intuitive choice on mobile screens. If you’re using a draggable card container in your mobile designs, make sure to provide clear context and guidance to the user.


Examples

LTR examples

Here are some examples of cards in left-to-right context:

Inverse light variation of the spinner component

RTL examples

Here are some examples of cards in right-to-left context:

Inverse light variation of the spinner component

Resources

Stable
Stable
Stable
Stable
Stable
iOS JustUI [UI Kit]
Stable
iOS PIE [SwiftUI]
Stable
Android PIE [Compose & Views]
Stable