自定义Loading组件

目录

Loading文件夹

• index.js
• index.less

代码详情

index.js

import React, { Component } from 'react';
import './index.less';
class Loading extends Component {
  renderType=() => {
    let type = '';
    switch (this.props.type) {
    case 'rect-scale':
      type = 'rect-scale';
      break;
    case 'pie-rotate':
      type = 'pie-rotate';
      break;
    case 'arc-scale':
      type = 'arc-scale';
      break;
    case 'pie-scale-translate':
      type = 'pie-scale-translate';
      break;
    case 'rect-translate':
      type = 'rect-translate';
      break;
    case 'rect-rotate':
      type = 'rect-rotate';
      break;
    default:
      type = 'rect-scale';
      break;
    }
    return `loadingBox animation-${type}`;
  }
  render() {
    return (
      <div className='loadingWrap'>
        <div className={this.renderType()}>
          <div className='shape shape1'></div>
          <div className='shape shape2'></div>
          <div className='shape shape3'></div>
          <div className='shape shape4'></div>
        </div>
      </div>
    );
  }
}

export default Loading;

index.js