@gravity-ui/uikit
Version:
Gravity UI base styling and components
43 lines (29 loc) • 1.37 kB
Markdown
# Spin
The `Spin` component displays the loading state (a rotating semicircle) in inline scenarios. Unlike `Loader`, this component is used to display the loading state in inline scenarios, e.g., in a `Button` or `Label`.
```tsx
import {Spin} from '@gravity-ui/uikit';
```
### Size
```tsx
<Spin size="xs" />
<Spin size="s" />
<Spin size="m" />
<Spin size="l" />
<Spin size="xl" />
```
`XS`: Extra small.
`S`: Small, used when a medium-sized spin is too large.
`M`: Medium (basic), used in most cases.
`L`: Large, used when a medium-sized spin is too small.
`XL`: Extra large.
## Properties
| Name | Description | Type | Default |
| :-------- | :------------------------------------ | :-----------------------------: | :-----: |
| size | Spin size | `"xs"` `"s"` `"m"` `"l"` `"xl"` | `"m"` |
| style | Custom CSS styles for root element | `React.CSSProperties` | |
| className | Custom CSS class for the root element | `string` | |
| qa | Test attribute (`data-qa`) | `string` | |
### CSS API
| Name | Description |
| :--------------- | :------------------------------ |
| `--g-spin-color` | The main color of the component |