Skip to content



Spin is a component used to display the loading state of a single element, such as a table cell.

For loading whole tables, forms, widgets and other complex components, use SpinContainer.


This component demonstrates the loading and response to user actions in the interface. For general recommendations regarding such components, refer to the Loading patterns.

Sizes and margins

The Spin component comes in six different sizes. The text size should be at least 14px.

Spin sizes and margins
SizeText belowText on the right



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

You can place text next to the spinner to inform the user that data is being loaded. The text should use the --text-secondary token for color, as it is considered a secondary message according to the overall visual hierarchy of the page.

Text can be placed on the right or below the spinner. In small components, blocks, and widgets, place the text to the right of the spinner. For large components, blocks of components, or inside large blocks and widgets, we recommend placing the text below the spinner and using one of the four largest Spin sizes.


Spin has two themes: dark and invert – for use on light and dark/colored backgrounds, respectively. Additionally, you can customize the Spin color as needed.

Spin themes
ThemeAppearance exampleDescription
darkUse this theme of Spin on a light background.
invertUse this theme of Spin on a dark/colored background.


For Spin appearance and disappearance, use an animation with a 300ms delay and ease-out easing.

Usage in UX/UI

Remember that the page loading indicator should help the user estimate the interface's response time (specifically how long they should wait for a certain result). Therefore, in cases where the system cannot determine the exact data loading time, we recommend adding an explanatory message next to the spinner, for example: Loading....

Released under the MIT License.

Released under the MIT License.