feat:add Loading

client/components/Loading/Loading.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './Loading.scss'
+
+export default class Loading extends React.Component{
+  static defaultProps = {
+    visible: false
+  }
+  static propTypes = {
+    visible: PropTypes.bool
+  }
+  constructor(props) {
+    super(props);
+    this.state = { show:props.visible };
+  }
+  componentWillReceiveProps(nextProps) {
+    this.setState({ show : nextProps.visible });
+  }
+  render(){
+    return(
+      <div
+        className="loading-box"
+        style={{ display: this.state.show ? 'flex' : 'none'}}
+      >
+        <div className="loading-box-bg"></div>
+        <div className="loading-box-inner">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </div>
+    )
+  }
+}

client/components/Loading/Loading.scss

@@ -0,0 +1,88 @@
+$ball-color:#30a1f2;
+$ball-size:.15rem;
+$ball-margin:.02rem;
+$loader-radius:.25rem;
+
+@function delay($interval, $count, $index) {
+  @return ($index * $interval) - ($interval * $count);
+}
+
+@keyframes ball-spin-fade-loader {
+  50% {
+    opacity: 0.3;
+    transform: scale(0.4);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@mixin ball-spin-fade-loader($n:8,$start:1){
+  @for $i from $start through $n {
+    > div:nth-child(#{$i}) {
+      $quarter: ($loader-radius/2) + ($loader-radius/5.5);
+
+      @if $i == 1 {
+        top: $loader-radius;
+        left: 0;
+      } @else if $i == 2 {
+        top: $quarter;
+        left: $quarter;
+      } @else if $i == 3 {
+        top: 0;
+        left: $loader-radius;
+      } @else if $i == 4 {
+        top: -$quarter;
+        left: $quarter;
+      } @else if $i == 5 {
+        top: -$loader-radius;
+        left: 0;
+      } @else if $i == 6 {
+        top: -$quarter;
+        left: -$quarter;
+      } @else if $i == 7 {
+        top: 0;
+        left: -$loader-radius;
+      } @else if $i == 8 {
+        top: $quarter;
+        left: -$quarter;
+      }
+      animation: ball-spin-fade-loader 1s delay(0.12s, $n, $i - 1) infinite linear;
+    }
+  }
+}
+
+.loading-box{
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 9999;
+  &-bg{
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(255,255,255,.7);
+  }
+  &-inner{
+    @include ball-spin-fade-loader();
+    position: relative;
+    >div{
+      position: absolute;
+      width: $ball-size;
+      height: $ball-size;
+      border-radius: 50%;
+      margin: $ball-margin;
+      background-color: $ball-color;
+      animation-fill-mode: both;
+    }
+  }
+}
+
+
+