Skip to content

Spin

Components
4.2.18

This component is one of the components that displays interface's reaction to user actions in the interface. For general rules on such components, see the Loading patterns.

Description

Spin is a component for displaying the loading status of the page, section or widget when system does not know the exact time of data loading.

For displaying Spin around any component, use SpinContainer.

Sizes

We have six sizes of Spin.

The size of the text should be at least 14px.

Size Text below Text on the right
XS
S
M
L
XL
XXL

Styles

For recommendations on Spin positioning and indents in blocks and on the page, see SpinContainer.

You can place text, which tells user that data is being loaded, next to the spinner. Text should use --text-secondary token for color, because it is a secondary message according to the whole visual hierarchy of the page.

Text can be placed on the right or under the spinner. Place the text to the right of the spinner in small components, blocks and widgets. If Spin with text is placed in a large component, around a block of components or inside large blocks and widgets, we recommended you to place the text below the spinner and use one of the four biggest Spin sizes.

Themes

Spin has two themes: dark and invert — for using on light and dark/colored backgrounds, respectively. You also can make your Spin colored in a custom color if needed.

Theme Appearance example Description
Dark Use Spin with this theme on a light background.
Invert Use Spin with this theme on a dark/colored background.

Animation

For Spin appearance and disappearance use animation with 300ms delay and ease-out.

Usage in UX/UI

Remember that the page loading indicator should help user to estimate the interface's response time (i.e. how long he should wait for a certain result). Therefore, in cases when system does not know exactly how long it will take to load data, we recommend you to add explanatory message next to a spinner, for example: Loading....

This component is one of the components that displays interface's reaction to user actions in the interface. For general rules on such components, see the Loading patterns.