skyquake/framework/widgets/loading-indicator/loadingIndicator.jsx

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 import React from 'react';
  20 import '../../../node_modules/loaders.css/src/animations/line-scale-pulse-out-rapid.scss';
  21 import './loading-indicator-animations.scss';
  22 let ReactCSSTransitionGroup = require('react-addons-css-transition-group');
  23 export default class Loader extends React.Component {
  24   constructor(props) {
  25     super(props);
  26   }
  27   render() {
  28     let loader = '';
  29     var style = {
  30       height: this.props.size + 'rem',
  31       width: this.props.size * 0.15 + 'rem',
  32       backgroundColor: this.props.color || 'white'
  33     }
  34     if (this.props.show) {
  35       loader = (
  36                 <div
  37                   transitionName="loader-animation"
  38                   transitionAppear={true}
  39                   component="div"
  40                   className={"line-scale-pulse-out-rapid"}>
  41                   <div style={style}></div>
  42                   <div style={style}></div>
  43                   <div style={style}></div>
  44                   <div style={style}></div>
  45                   <div style={style}></div>
  46                 </div>
  47       );
  48     }else {
  49       loader = <span></span>
  50     }
  51     return loader;
  52
  53   }
  54 }
  55
  56 Loader.defaultProps = {
  57   show: true,
  58   size: '5'
  59 }
  60