Loading 加载

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

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

注意事项

Loading 默认使用 display='inline-block' 布局的方式包裹内部元素。

如果希望 通栏包裹 可以修改 <Loading style={{display: 'block'}} />

API

加载

代码示例

基本

最简单的用法。

查看源码在线预览

import { Loading } from "@icedesign/base";
ReactDOM.render(
  <Loading tip="加载中...">
    <div className="demo">test</div>
  </Loading>,
  mountNode
);

.demo {
    width: 500px;
    background-color: #0dcecb;
    text-align: center;
    padding:50px;
}

加载动画

shape 来区分多种加载动画

查看源码在线预览

import { Loading } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Loading shape="flower" tip="loading..." color="#333">
      <div className="demo">flower</div>
    </Loading>
    <br />
    <Loading shape="fusion-reactor" color="#fff">
      <div className="demo">fusion-reactor</div>
    </Loading>
    <Loading shape="dot-circle">
      <div className="demo">dot-circle</div>
    </Loading>
  </div>,
  mountNode
);

.demo {
    width: 500px;
    background-color: #0dcecb;
    text-align: center;
    padding:50px;
}
.next-loading {
    margin-bottom: 5px;
}

关闭加载

可切换加载状态。

查看源码在线预览

import { Loading, Form, Input, Button } from "@icedesign/base";
const FormItem = Form.Item;
const layout = {
  labelCol: {
    fixedSpan: 4
  },
  wrapperCol: {
    span: 18
  }
};
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }
  setVisible(visible) {
    this.setState({
      visible
    });
  }
  render() {
    return (
      <div>
        <Loading visible={this.state.visible} shape="fusion-reactor">
          <Form style={{ width: 500 }}>
            <FormItem label="用户名：" {...layout}>
              <Input />
            </FormItem>
            <FormItem label="密码：" {...layout}>
              <Input htmlType="password" placeholder="请输入密码" />
            </FormItem>
            <FormItem label="备注：" {...layout}>
              <Input multiple />
            </FormItem>
          </Form>
        </Loading>
        <div style={{ paddingLeft: 100 }}>
          <Button onClick={this.setVisible.bind(this, true)} type="primary">
            提交
          </Button>
          <Button onClick={this.setVisible.bind(this, false)}>取消</Button>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

自定义

你可以自定义动画，把自己的动画元素传进去, 需要自己写动画样式

查看源码在线预览

import { Loading } from "@icedesign/base";
const tipLoader1 = (
  <div className="load-container load1">
    <div className="loader">loading...</div>
  </div>
);
const tipLoader7 = (
  <div className="load-container load7">
    <div className="loader">loading...</div>
  </div>
);
ReactDOM.render(
  <div>
    <Loading tip={tipLoader1}>
      <div className="demo">test</div>
    </Loading>
    <Loading tip={tipLoader7}>
      <div className="demo">test</div>
    </Loading>
  </div>,
  mountNode
);

.demo {
    width: 500px;
    background-color: #0dcecb;
    text-align: center;
    padding:50px;
}
.next-loading {
    margin-bottom: 5px;
}
/* css 从这里开始抄 */
.load-container {
  margin: 0 auto;
  position: relative;
}
/* 第一个动画效果 */
.load1 .loader,
.load1 .loader:before,
.load1 .loader:after {
  background: #fff;
  color: #fff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.load1 .loader:before,
.load1 .loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.load1 .loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.load1 .loader {
  text-indent: -9999em;
  margin: 0 auto !important;
  position: relative;
  font-size: 11px;
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.load1 .loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 ;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em ;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 ;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em ;
    height: 5em;
  }
}
/* 第二个动画效果 */
.load7 .loader:before,
.load7 .loader:after,
.load7 .loader {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
  top: -36px;
}
.load7 .loader {
  margin: 0 auto !important;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.load7 .loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.load7 .loader:after {
  left: 3.5em;
}
.load7 .loader:before,
.load7 .loader:after {
  content: '';
  position: absolute;
  top: 0;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #fff;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #fff;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #fff;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #fff;
  }
}

相关区块

暂无相关区块