# MSpin 加载中

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/spin/freepass)
- 平台：移动端
- 维护者：任青松
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MSpin]

## 代码演示

### 基础用法

转圈加载中。

```jsx
import React, { CSSProperties } from 'react';
import { MSpin } from '@weapp/ui';

class SpinDemo extends React.Component {
  render() {

    const demoStyle: CSSProperties = { display: 'flex', justifyContent: 'space-around' };
    return (
      <div className={'SpinDemo'} style={{ padding: 10 }}>
        <h3>单独使用</h3>
        <MSpin style={{ height: 50 }} color={"red"} className={'loading'} />
        <h3>不同颜色</h3>
        <div style={demoStyle}>
          <div style={{ height: 50 }}>
            <MSpin />
          </div>
          <div style={{ height: 50 }}>
            <MSpin color='#1677ff' />
          </div>
          <div style={{ height: 50 }}>
            <MSpin color='greenyellow' />
          </div>
        </div>
        <h3>不同尺寸</h3>
        <div style={demoStyle}>
          <div style={{ height: 50 }}>
            <MSpin size="small" />
          </div>
          <div style={{ height: 50 }}>
            <MSpin />
          </div>
          <div style={{ height: 50 }}>
            <MSpin size="large" />
          </div>
        </div>
      </div>
    )
  }
}

export default SpinDemo;
```

### 容器

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

```jsx
import React from 'react';
import { MSpin,MSwitch } 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 style={{padding:10}}>
        <h3>作为容器使用</h3>
        <MSpin 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.
        </MSpin>
        <div style={{ marginTop: 16 }}>
          Loading state：
          <MSwitch value={loading} onChange={this.toggle} />
        </div>
      </div>
    )
  }
}

export default SpinDemo;
```

## API

### 参数说明如下：

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