Loading-spinner

Component st

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

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. Progress label (optional)

Properties

Type

Primary

Large is for modal or large-scale cards on the layout.

Secondary

Default is for cards on a layout or on the pages.

Size

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.

Alignment

Horizontal

Use the spinner horizontally in tight areas.

Vertical

Use verticaly in larger areas.

Attribute

Label (boolean)

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.