Spin

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.

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.

We have six sizes of Spin.

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

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.

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.

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

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.