Spinner

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

1. Spinner icon
2. Spinner label (optional)

Properties

Type

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

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

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

Horizontal

Use the spinner label horizontally in tight areas.

Vertical

Use vertically in larger areas like cards or large modals.

Figma source