Loading 加载

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

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

注意事项

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

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

API

Loading

参数说明类型默认值
tip自定义内容any-
size设置动画尺寸可选值:'large'(大号)'medium'(中号)Enum'large'
tipAlign自定义内容位置可选值:'right'(出现在动画右边)'bottom'(出现在动画下面)Enum'bottom'
visibleloading 状态, 默认 trueBooleantrue
indicator自定义动画any-
color动画颜色String-
fullScreen全屏展示Boolean-
children子元素any-
inlineshould loader be displayed inlineBooleantrue

代码示例

基本用法

最简单的用法。

Loading 加载 - 图1

查看源码在线预览

  1. import { Loading } from '@alifd/next';
  3. ReactDOM.render(
  4.     <div>
  5.         <div>LTR
  6.             <Loading tip="加载中..." >
  7.                 <div className="demo">test</div>
  8.             </Loading>
  9.         </div>
  10.         <div>RTL
  11.             <Loading tip="加载中..." rtl >
  12.                 <div className="demo">test</div>
  13.             </Loading>
  14.         </div>
  15.     </div>
  16.     , mountNode);
  1. .demo {
  2.     width: 500px;
  3.     background-color: #F2F3F7;
  4.     text-align: center;
  5.     padding:50px;
  6. }

自定义Loading动画

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

Loading 加载 - 图2

查看源码在线预览

  1. import { Loading } from '@alifd/next';
  3. const indicator1 = (<div className="load-container load1">
  4.     <div className="loader">loading...</div>
  5. </div>);
  6. const indicator7 = (<div className="load-container load7">
  7.     <div className="loader">loading...</div>
  8. </div>);
  10. ReactDOM.render(<div>
  11.     <Loading tip="default animation">
  12.         <div className="demo">test</div>
  13.     </Loading>
  14.     <Loading indicator={indicator1}>
  15.         <div className="demo">test</div>
  16.     </Loading>
  17.     <Loading indicator={indicator7}>
  18.         <div className="demo">test</div>
  19.     </Loading>
  20. </div>, mountNode);
  1. .demo {
  2.     width: 500px;
  3.     background-color: #F2F3F7;
  4.     text-align: center;
  5.     padding:50px;
  6. }
  7. .next-loading {
  8.     margin-bottom: 5px;
  9. }
  11. /* start copy from here */
  14. .load-container {
  15.   margin: 0 auto;
  16.   position: relative;
  17. }
  19. /* animation 1 */
  20. .load1 .loader,
  21. .load1 .loader:before,
  22. .load1 .loader:after {
  23.   background: #5584FF;
  24.   color: #5584FF;
  25.   -webkit-animation: load1 1s infinite ease-in-out;
  26.   animation: load1 1s infinite ease-in-out;
  27.   width: 1em;
  28.   height: 4em;
  29. }
  30. .load1 .loader:before,
  31. .load1 .loader:after {
  32.   position: absolute;
  33.   top: 0;
  34.   content: '';
  35. }
  36. .load1 .loader:before {
  37.   left: -1.5em;
  38.   -webkit-animation-delay: -0.32s;
  39.   animation-delay: -0.32s;
  40. }
  41. .load1 .loader {
  42.   text-indent: -9999em;
  43.   margin: 0 auto !important;
  44.   position: relative;
  45.   font-size: 11px;
  46.   -webkit-animation-delay: -0.16s;
  47.   animation-delay: -0.16s;
  48. }
  49. .load1 .loader:after {
  50.   left: 1.5em;
  51. }
  52. @-webkit-keyframes load1 {
  53.   0%,
  54.   80%,
  55.   100% {
  56.     box-shadow: 0 0 ;
  57.     height: 4em;
  58.   }
  59.   40% {
  60.     box-shadow: 0 -2em ;
  61.     height: 5em;
  62.   }
  63. }
  64. @keyframes load1 {
  65.   0%,
  66.   80%,
  67.   100% {
  68.     box-shadow: 0 0 ;
  69.     height: 4em;
  70.   }
  71.   40% {
  72.     box-shadow: 0 -2em ;
  73.     height: 5em;
  74.   }
  75. }
  78. /* animation 2 */
  79. .load7 .loader:before,
  80. .load7 .loader:after,
  81. .load7 .loader {
  82.   border-radius: 50%;
  83.   width: 2.5em;
  84.   height: 2.5em;
  85.   -webkit-animation-fill-mode: both;
  86.   animation-fill-mode: both;
  87.   -webkit-animation: load7 1.8s infinite ease-in-out;
  88.   animation: load7 1.8s infinite ease-in-out;
  89.   top: -36px;
  90. }
  91. .load7 .loader {
  92.   margin: 0 auto !important;
  93.   font-size: 10px;
  94.   position: relative;
  95.   text-indent: -9999em;
  96.   -webkit-animation-delay: -0.16s;
  97.   animation-delay: -0.16s;
  98. }
  99. .load7 .loader:before {
  100.   left: -3.5em;
  101.   -webkit-animation-delay: -0.32s;
  102.   animation-delay: -0.32s;
  103. }
  104. .load7 .loader:after {
  105.   left: 3.5em;
  106. }
  107. .load7 .loader:before,
  108. .load7 .loader:after {
  109.   content: '';
  110.   position: absolute;
  111.   top: 0;
  112. }
  113. @-webkit-keyframes load7 {
  114.   0%,
  115.   80%,
  116.   100% {
  117.     box-shadow: 0 2.5em 0 -1.3em #5584FF;
  118.   }
  119.   40% {
  120.     box-shadow: 0 2.5em 0 0 #5584FF;
  121.   }
  122. }
  123. @keyframes load7 {
  124.   0%,
  125.   80%,
  126.   100% {
  127.     box-shadow: 0 2.5em 0 -1.3em #5584FF;
  128.   }
  129.   40% {
  130.     box-shadow: 0 2.5em 0 0 #5584FF;
  131.   }
  132. }

关闭加载

可切换加载状态。

Loading 加载 - 图3

查看源码在线预览

  1. import { Loading, Form, Input, Button } from '@alifd/next';
  4. const FormItem = Form.Item;
  6. const layout = {
  7.     labelCol: {
  8.         fixedSpan: 4
  9.     },
  10.     wrapperCol: {
  11.         span: 18
  12.     }
  13. };
  15. class App extends React.Component {
  16.     constructor(props) {
  17.         super(props);
  18.         this.state = {
  19.             visible: false
  20.         };
  21.     }
  23.     setVisible(visible) {
  24.         this.setState({
  25.             visible
  26.         });
  27.     }
  28.     render() {
  29.         return (<div>
  30.             <Loading visible={this.state.visible} shape="fusion-reactor">
  31.                 <Form style={{width: 500}}>
  32.                     <FormItem label="Username" {...layout} >
  33.                         <Input />
  34.                     </FormItem>
  35.                     <FormItem label="Password" {...layout} >
  36.                         <Input htmlType="password" placeholder="please input"/>
  37.                     </FormItem>
  38.                     <FormItem label="Detail" {...layout} >
  39.                         <Input multiple />
  40.                     </FormItem>
  41.                 </Form>
  42.             </Loading>
  43.             <div style={{paddingLeft: 80}}>
  44.                 <Button onClick={this.setVisible.bind(this, true)} type="primary">Submit</Button>
  45.                 <Button onClick={this.setVisible.bind(this, false)} style={{marginLeft: 5}}>Cancel</Button>
  46.             </div>
  47.         </div>);
  48.     }
  49. }
  50. ReactDOM.render(<App/>, mountNode);

全屏

全屏展示

Loading 加载 - 图4

查看源码在线预览

  1. import { Loading, Button } from '@alifd/next';
  5. class App extends React.Component {
  7.     constructor(props, context) {
  8.         super(props, context);
  9.         this.state = {
  10.             visible: false
  11.         };
  12.     }
  14.     onClick() {
  15.         this.setState({visible: !this.state.visible});
  16.     }
  18.     onClose = () => {
  19.         this.setState({
  20.             visible: false
  21.         });
  22.     }
  24.     render() {
  25.         return (
  26.             <span>
  27.                 <Loading visible={this.state.visible}
  28.                     fullScreen
  29.                     shape="fusion-reactor"
  30.                     safeNode={this.btn}
  31.                     onVisibleChange={this.onClose.bind(this)}>
  32.                     <Button onClick={this.onClick.bind(this)} ref={ref => (this.btn = ref)}>Full Screen</Button>
  33.                 </Loading>
  34.             </span>
  35.         );
  36.     }
  37. }
  39. ReactDOM.render(<App/>, mountNode);

自定义提示语位置

你可以选择提示语的位置,目前支持两个值 right/bottom(默认值)

Loading 加载 - 图5

查看源码在线预览

  1. import { Loading } from '@alifd/next';
  3. ReactDOM.render(<div>
  4.     <Loading tip="default">
  5.         <div className="demo">test</div>
  6.     </Loading>
  7.     <Loading tip="right" tipAlign="right">
  8.         <div className="demo">test</div>
  9.     </Loading>
  10.     <Loading tip="bottom" tipAlign="bottom">
  11.         <div className="demo">test</div>
  12.     </Loading>
  13. </div>, mountNode);
  1. .demo {
  2.     width: 500px;
  3.     background-color: #F2F3F7;
  4.     text-align: center;
  5.     padding:50px;
  6. }
  7. .next-loading {
  8.     margin-bottom: 5px;
  9. }

Loading动画尺寸

设置Loading动画的尺寸,只对原生的indicator管用

Loading 加载 - 图6

查看源码在线预览

  1. import { Loading } from '@alifd/next';
  3. ReactDOM.render(<div>
  4.     <Loading tip="normal(size default large)" >
  5.         <div className="demo">test</div>
  6.     </Loading>
  7.     <Loading tip="large" size="large">
  8.         <div className="demo">test</div>
  9.     </Loading>
  10.     <Loading tip="medium" size="medium">
  11.         <div className="demo">test</div>
  12.     </Loading>
  13. </div>, mountNode);
  1. .demo {
  2.     width: 500px;
  3.     background-color: #F2F3F7;
  4.     text-align: center;
  5.     padding:50px;
  6. }
  7. .next-loading {
  8.     margin-bottom: 5px;
  9. }

相关区块

Loading 加载 - 图7

暂无相关区块