@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
182 lines (144 loc) • 4.75 kB
Markdown
---
localeCode: en-US
order: 93
category: Feedback
title: Spin
subTitle: Spin
icon: doc-spin
brief: Spin is used to inform the user that the content is loading and may take an uncertain period of time.
---
## Demos
### How to import
```jsx
import { Spin } from '@douyinfe/semi-ui';
```
### Basic usage
```jsx live=true
import React from 'react';
import { Spin } from '@douyinfe/semi-ui';
() => (
<div style={{ marginLeft: 30 }}>
<div style={{ marginBottom: 10 }}>A basic spin.</div>
<Spin />
</div>
);
```
### Size
Supports three sizes: `large`, `medium` (default), and `small`.
```jsx live=true
import React from 'react';
import { Spin } from '@douyinfe/semi-ui';
() => (
<div style={{ marginLeft: 30 }}>
<div style={{ marginBottom: 5 }}>size: small</div>
<Spin size="small" />
<br />
<br />
<div style={{ marginBottom: 10 }}>size: middle</div>
<Spin size="middle" />
<br />
<br />
<div style={{ marginBottom: 15 }}>size: large</div>
<Spin size="large" />
</div>
);
```
### With Description
Use `tip` to set the description texts when Spin is used as a wrapping element
```jsx live=true
import React from 'react';
import { Spin } from '@douyinfe/semi-ui';
() => (
<div>
<Spin tip="I am loading...">
<div
style={{
border: '1px solid var(--semi-color-primary)',
borderRadius: '4px',
paddingLeft: '8px',
}}
>
<p>Here are some texts.</p>
<p>And more texts on the way.</p>
</div>
</Spin>
</div>
);
```
### Customized Indicator
Use `indicator` property to customize Spin's indicator style.
```jsx live=true
import React from 'react';
import { Spin } from '@douyinfe/semi-ui';
import { IconLoading } from '@douyinfe/semi-icons';
() => (
<div style={{ marginLeft: 30 }}>
<div>A spin with customized indicator.</div>
<Spin indicator={<IconLoading />} />
</div>
);
```
### Delay
Delayed to display Spin.
```jsx live=true hideInDSM
import React, { useState } from 'react';
import { Spin, Button } from '@douyinfe/semi-ui';
() => {
const [loading, toggleLoading] = useState(false);
const toggle = () => {
toggleLoading(!loading);
};
return (
<div>
<Button onClick={toggle} style={{ marginRight: 20 }}>
Delayed spin
</Button>
<Spin delay={1000} spinning={loading}></Spin>
</div>
);
};
```
### Controlled
Use `spinning` to determine if the component is in loading status
```jsx live=true hideInDSM
import React, { useState } from 'react';
import { Spin, Button } from '@douyinfe/semi-ui';
() => {
const [loading, toggleLoading] = useState(false);
const toggle = () => {
toggleLoading(!loading);
};
return (
<div>
<Button onClick={toggle} style={{ marginRight: 20 }}>
Controlled Spin
</Button>
<Spin spinning={loading}></Spin>
</div>
);
};
```
## API Reference
| Properties | Instructions | type | Default |
| ---------------- | --------------------------------------------------------- | ---------- | -------- |
| childStyle | Inline style for children element | CSSProperties | - |
| delay | Delay timing to display Spin | number(ms) | 0 |
| indicator | Indicators | ReactNode | - |
| size | Size, one of `small`, `middle`, `large` | string | `middle` |
| spinning | Toggle whether it is in loading | boolean | true |
| style | Inline style | CSSProperties | - |
| tip | Description texts when Spin is used as a wrapping element | ReactNode | - |
| wrapperClassName | Class name of wrapping element | string | - |
## Design Tokens
<DesignToken/>
## Content Guidelines
- Precisely state the loading status, using words such as "Loading", "Submitting", "Processing", etc.
- Use as few words as possible to describe the state
## FAQ
- **How to modify the color of the spin icon? **
You can override the original color by adding the color property to the .semi-spin-wrapper class (it is recommended to override with a higher weight).
```
.custom .semi-spin-wrapper {
color: red;
}
```