Skip to main content

Spinner

Overview​

Used to show indeterminate progress, especially at a sub-page level.

Definition​

Spinner is a visual indicator rotating or animated that communicates to the user that the system is performing a task.

Live Demo​

  • Spinner A looped indicator that indicates progress.

Spinner

Anatomy​

Variants​

Indeterminate Spinner

  • The Spinner for a sub- page indeterminate progress.

Indeterminate Xing

  • The Xing loader for page-level indeterminate progress.

iOS​

  • Blurred background over content loading
  • Use native iOS spinner with grey box background behind the native element.
  • Use "Loading" underneath the spinner element

Android​

  • Show banner / Top navigation
  • Use MUI surface / Neutral 'Subtle' background
  • Use MUI spinner component

Size​

  • Keep spinner small but noticeable (48X48px) ??

Guidelines​

When to use​

  • Within Bright Apps only
  • When a process or action is in progress - used to signal loading or waiting
  • Transitions / Navigating between screens

When not to use​

  • For very short tasks (i.e if the action takes less than a second)
  • When a progress would be more appropriate, for example: if the process is taking a long time.

Note: For guidelines on when to use and when not to use, see the Loading states design pattern

Position​

  • The spinner should be positioned in the centre of the screen or centred within a content block if the spinner is being used inline with content.

Behaviour​

Display on interaction

The spinner is activated when the user interacts by tapping on a feature or call to action that requires data fetch.

Appearance

The spinner appears centred within the content area with a rotating animation.

Duration

The spinner should remain visible until the data fetch is complete or a timeout occurs.

Dismissal

Once the data is successfully loaded or the task is complete, the spinner fades out and the content is displayed.

Content​

Only the main banner and secondary navigation remain visible

All other content (e.g; body content, lists, forms) should be replaced by the spinner

Accessibility​

Use sufficient contrast between the spinner component and the background

Screen reader compatibility​

Semantic labelling (e.g ARIA label) allows screen readers to announce 'Loading content' message, when the spinner appears for users who rely on audio feedback.