页面局部处于等待异步数据或正在渲染过程时，可以适当的缓解用户因为等待页面渲染而带来的焦虑。
##### **简单的加载中**
```jsx
import { Spin } from 'dbox-ui';
```
##### **三种不同大小的加载中**
```jsx
import { Spin } from 'dbox-ui';
```
##### **放在容器中**
```jsx
import { Spin } from 'dbox-ui';
const style = {
textAlign: 'center',
background: 'rgba(0, 0, 0, 0.05)',
borderRadius: 4,
marginBottom: 20,
paddingTop: 30,
paddingBottom: 30,
paddingLeft: 50,
paddingRight: 50,
marginTop: 20,
marginBotton: 20
}
class SpinView extends React.Component {
render () {
return (
)
}
}
```
##### **自定义描述文案**
```jsx
import { Spin, Alert } from 'dbox-ui';
```
##### **卡片加载中**
```jsx
import { Alert, Spin, Switch } from 'dbox-ui';
const container = (
);
class SpinViewLoading extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false
}
this.toggle = this.toggle.bind(this);
}
toggle(value) {
this.setState({ loading: value });
}
render() {
return (
{container}
Loading state：
)
}
}
```
##### **自定义颜色**
```jsx
const style = {
textAlign: 'center',
background: '#13B886',
borderRadius: 4,
marginBottom: 20,
paddingTop: 30,
paddingBottom: 30,
paddingLeft: 50,
paddingRight: 50,
marginTop: 20,
marginBotton: 20
}
class SpinView extends React.Component {
render () {
return (
)
}
}
```
##### **API**
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |
| size | 组件大小，可选值为 `small` `default` `large` | string | 'default' |
| spinning | 是否旋转 | boolean | true |
| tip | 当作为包裹元素时，可以自定义描述文案 | string | - |
| color | 在深色背景下，spin的四个边框颜色自定义 | Array | |
```jsx noeditor
import {BackTop} from 'dbox-ui';
import SpinView from '../prevPage/spin';
```