使用React 制作一个简单的加载动画组件

最近项目开发时候遇到这样的情况就毫不客气的介入了加载条的开发计划中来。

Github 项目地址

演示效果

定义需求

加载条说简单的需求来说就是:

加载动画 + 文案 + 层级位置

如果理解需求了的话，开发就相对轻松了。自己能够用到的的场景大致有弹框提交，页面加载数据，按钮禁用提交这些。

自己设计的一般结构如下

<div className="react-loading-spinner" >
    <div className="loading-inner">
          {loading} .  // loading animation element
        <div className="alert-text">{this.props.text}</div>
    </div> 
</div>

由于JSX的方便性，我们可以定义行内的直接返回loading中的东西。同样也可以作为children存放自定义的元素放进去，比如你喜欢使用svg或者css动画等。

关于遮罩层定位，很多情况下可能需要加载动画的DIV占满整个屏幕，

对于最外层的DIV会考虑到position: absolute,宽高占满。其中中间的gif则需要使用定位将其放置绝对居中。这个有很多方案，如果用绝对定位的话，可以使用translate来实现会比较方便直接点。

.loading-inner{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

不过这种方式需要外层元素定位过。如果不需要有遮罩效果的，可以自定义其外层的样式。从而增加灵活性。

还有一个关键点，虽然很简单，但是需要有，那就是可以控制样式的显示和隐藏。通过属性控制就好类似:

<Spinner show={showState}></Spinner>

这样我们可以来开始定义基本的属性:

Spinner.propTypes = {
  type: React.PropTypes.string, // 动画类型
  display: React.PropTypes.string, // 显示形式
  color: React.PropTypes.string,  // 加载条颜色
  style: React.PropTypes.object,  // 样式对象
  text: React.PropTypes.string,  // 内置文案
  cls: React.PropTypes.string,   // 复写class
  show: React.PropTypes.bool,   // 控制显示隐藏
};

Spinner.defaultProps = {
  type: 'svg',
  style: {},
  color: '#9b59b6',
  text: '加载中...',
  cls: '',
  show: false,
}

差不多按照思路写下来，可以实现一个基本的加载效果的组件。

Github 项目地址

演示效果

开始使用

Use Npm

npm install react-core-loading-spinner --save-dev

Use yarn

yarn add react-core-loading-spinner

代码

import React from 'react';
import {Spinner}  from '../react-core-image-upload';
let App = React.createClass({ 
//...

  render() {
    return(
      <div>
        <Spinner show={true} text="Requesting..."></Spinner>
      </div>
    );
  },
  
})