Spinner

A spinner is an animated circle icon used to indicate an indeterminate loading process.

Design

Implemented

Web component

Is documented

Status

Healthy

Figma component

Storybook

Principles

Use when

  1. to visually represent the loading process of a section or data where user interaction with other parts of the interface cannot be prevented.
  2. the system requires time to fetch the next action from input fields, buttons, or dropdown.
  3. the system is unable to determine with certainty the layout and components to be used once the screen loads.

Don't use when

  1. to indicate the duration until the system completes the process in a predictable or unknown amount of time, use a progress bar instead.

Structure

loading-spinner-structure
  1. Spinner icon
  2. Spinner label (optional)

Properties

Type

Storybook failed to load. Please connect to the VPN to access.

Primary

This type of spinner should be used in wide areas, such as pages, cards, or large modals, to directly indicate the data that will be loaded.

Secondary

Secondary spinner should be used at a modular level to indicate loading sequences at the component level.

For example, it should be used to indicate the busy state of a button or an input when it sends a request.

Size

Storybook failed to load. Please connect to the VPN to access.

Default

The default spinner can be used in larger sections, such as previewing documents.

Small

The small spinner can be used in compact areas, such as input and button fields.

Spinner with label

Storybook failed to load. Please connect to the VPN to access.

The label is for when it is necessary to provide a short brief of information about a process while a loading operation occurs in the background.

Label placement

Storybook failed to load. Please connect to the VPN to access.

Horizontal

Use the spinner label horizontally in tight areas.

Vertical

Use vertically in larger areas like cards or large modals.

Figma source