Spin加载中

用于页面和区块的加载中状态。

何时使用

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

代码演示

基本用法

一个简单的 loading 状态。

import { Spin } from 'choerodon-ui';
ReactDOM.render(<Spin />, mountNode);

容器

放入一个容器中。

import { Spin } from 'choerodon-ui';
ReactDOM.render(
  <div className="example">
    <Spin />
  </div>,
  mountNode);

.example {
  text-align: center;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}

自定义描述文案

自定义描述文案。

import { Spin, Alert } from 'choerodon-ui';
ReactDOM.render(
  <Spin tip="Loading...">
    <Alert
      message="Alert message title"
      description="Further details about the context of this alert."
      type="info"
    />
  </Spin>,
  mountNode);

自定义指示符

使用自定义指示符。

import { Spin } from 'choerodon-ui';
const c7nIcon = (
  <span className="custom-spin-dot">
    <i />
    <i />
    <i />
    <i />
  </span>
);
ReactDOM.render((
  <div>
    <Spin indicator={c7nIcon} size="small" />
    <Spin indicator={c7nIcon} />
    <Spin indicator={c7nIcon} size="large" />
  </div>
), mountNode);

.custom-spin-dot {
  transform: rotate(45deg);
  animation: c7nRotate 1.2s infinite linear;
}
.custom-spin-dot i {
  width: 45%;
  height: 45%;
  border-radius: 100%;
  background-color: #3f51b5;
  transform: scale(.75);
  display: block;
  position: absolute;
  opacity: .3;
  animation: c7nSpinMove 1s infinite linear alternate;
  transform-origin: 50% 50%;
}
.custom-spin-dot i:nth-child(1) {
  left: 0;
  top: 0;
}
.custom-spin-dot i:nth-child(2) {
  right: 0;
  top: 0;
  animation-delay: .4s;
}
.custom-spin-dot i:nth-child(3) {
  right: 0;
  bottom: 0;
  animation-delay: .8s;
}
.custom-spin-dot i:nth-child(4) {
  left: 0;
  bottom: 0;
  animation-delay: 1.2s;
}
@keyframes c7nSpinMove {
  to {
    opacity: 1;
  }
}
@keyframes c7nRotate {
  to {
    transform: rotate(405deg);
  }
}

各种大小

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

import { Spin } from 'choerodon-ui';
ReactDOM.render(
  <div>
    <Spin size="small" />
    <Spin />
    <Spin size="large" />
  </div>,
  mountNode);

卡片加载中

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

import { Spin, Switch, Alert } from 'choerodon-ui';
class Card extends React.Component {
  state = { loading: false }
  toggle = (value) => {
    this.setState({ loading: value });
  }
  render() {
    return (
      <div>
        <Spin spinning={this.state.loading}>
          <Alert
            message="Alert message title"
            description="Further details about the context of this alert."
            type="info"
          />
        </Spin>
        <div style={{ marginTop: 16 }}>
          Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
        </div>
      </div>
    );
  }
}
ReactDOM.render(<Card />, mountNode);

延迟

延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束，则不显示 loading 状态。

import { Spin, Alert, Switch } from 'choerodon-ui';
class Card extends React.Component {
  state = { loading: false }
  toggle = (value) => {
    this.setState({ loading: value });
  }
  render() {
    const container = (
      <Alert
        message="Alert message title"
        description="Further details about the context of this alert."
        type="info"
      />
    );
    return (
      <div>
        <Spin spinning={this.state.loading} delay={500}>{container}</Spin>
        <div style={{ marginTop: 16 }}>
          Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
        </div>
      </div>
    );
  }
}
ReactDOM.render(<Card />, mountNode);

API