# Spin 加载中

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/spin/freepass)
- 平台：PC
- 维护者：任青松
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/sjl/loading/
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Spin]

## 代码演示

### 基础用法

最简单的Spin，用于页面和区块的加载中状态。

```jsx
import React from 'react';
import { Spin } from '@weapp/ui';

class SpinDemo extends React.Component {
  render() {
    return (
      <div>
        <h3>基本用法</h3>
        <Spin />
      </div>
    )
  }
}

export default SpinDemo;
```

### 不同尺寸

小的用于文本加载，默认用于卡片容器级加载，大的用于页面级加载。

```jsx
import React from 'react';
import { Spin } from '@weapp/ui';

class SpinDemo extends React.Component {
  render() {
    return (
      <div style={{display:'flex',justifyContent:'space-around',alignItems:'center'}}>
        <Spin size="small" />
        <Spin />
        <Spin size="large" />
      </div>
    )
  }
}

export default SpinDemo;
```

### 容器

可以直接把内容内嵌到 Spin 中，将现有容器变为加载状态。

```jsx
import React from 'react';
import { Spin, Switch } from '@weapp/ui';
class SpinDemo extends React.Component {

  state = {
    loading: true
  }
  toggle = (value: boolean) => {
    this.setState({ loading: value })
  }
  render() {
    const { loading } = this.state;
    return (
      <div>
        <Spin spinning={loading}>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </Spin>
        <div style={{ marginTop: 16 }}>
          Loading state：
          <Switch value={loading} onChange={this.toggle} />
        </div>

      </div>
    )
  }
}
export default SpinDemo;
```

### 自定义描述文案

自定义加载文案的的描述

```jsx
import React from 'react';
import { Spin } from '@weapp/ui';
class SpinDemo extends React.Component {
  render() {
    return (
      <div>
        <Spin />
        <br />
        <Spin text="加载中。。。">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </Spin>
      </div>
    )
  }
}

export default SpinDemo;
```

### 全局调用

```jsx
import React from 'react';
import { Spin, Button } from '@weapp/ui';

const { globalSpin } = Spin

class SpinGlobalDemo extends React.Component {
  onClick = () => {
    globalSpin.start()

    // 3000ms 后关闭
    setTimeout(() => {
      globalSpin.end()
    }, 3000)
  }

  onSvgClick = () => {
    globalSpin.start({
      useSvgSpin: true
    })

    // 3000ms 后关闭
    setTimeout(() => {
      globalSpin.end({
        useSvgSpin: true
      })
    }, 3000)
  }

  render() {
    return (
      <div>
        <div>
          <Button onClick={this.onClick}>调用全局Spin</Button>
        </div>
        <br/>
        <div>
          <Button onClick={this.onSvgClick}>使用svg调用全局Spin</Button>
        </div>
      </div>

    )
  }
}

export default SpinGlobalDemo;
```

### 自定义样式

自定义加载状态的颜色

```jsx
import React from 'react';
import { Spin } from '@weapp/ui';
class SpinDemo extends React.Component {
  render() {
    return (
      <div>
        <Spin color='red'/>
      </div>
    )
  }
}

export default SpinDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| spinning | 是否显示 | boolean | 否 | false |
| style | 样式 | CSSProperties | 否 |  |
| customRender | 自定义渲染 | (_: any, ele: ReactNode) => ReactNode | 否 |  |
| size | 尺寸大小 | small、large | 否 |  |
| type | 加载模式 | circle、curve | 否 |  |
| color | 旋转图标颜色 | string | 否 |  |
| wrapperClassName | 最外层包裹样式 | string | 否 |  |
| text | 加载文字 | string | 否 |  |
### 全局调用 API 说明如下：

### 正常模式：

```javascript
globalSpin.start(props): 启用遮罩loading
globalSpin.end(): 停止遮罩loading
globalSpin.destroy(): 销毁遮罩loading
```

### svg模式：

```javascript
globalSpin.start({useSvgSpin: true}): 启用遮罩loading
globalSpin.end({useSvgSpin: true}): 停止遮罩loading
globalSpin.destroy(): 销毁遮罩loading
```
