feat: 新增loading组件

src/components/BlockLoading/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import  './index.scss';
+const BlockLoading = () => {
+  return (
+    <div className="load-block">
+        <div className="item1"></div>
+        <div className="item2"></div>
+        <div className="item4"></div>
+        <div className="item3"></div>
+    </div>
+  );
+};
+
+export default BlockLoading;

src/components/BlockLoading/index.scss

@@ -0,0 +1,126 @@
+$color: #c2f5d3;
+$inColor: #f9c094;
+
+.load-block {
+  width: 45px;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  animation: rotate 8s infinite ease-in-out;
+  .item1 {
+    width: 20px;
+    height: 20px;
+    animation: changeColor1 2s infinite ease-in-out;
+  }
+  .item2 {
+    width: 20px;
+    height: 20px;
+    animation: changeColor2 2s infinite ease-in-out;
+  }
+  .item3 {
+    width: 20px;
+    height: 20px;
+    animation: changeColor3 2s infinite ease-in-out;
+  }
+  .item4 {
+    width: 20px;
+    height: 20px;
+    animation: changeColor4 2s infinite ease-in-out;
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform:rotate(0deg);
+  }
+  25% {
+    transform:rotate(90deg);
+  }
+  50% {
+    transform:rotate(180deg);
+  }
+  75% {
+    transform:rotate(270deg);
+  }
+  100% {
+    transform:rotate(360deg);
+  }
+}
+
+
+@keyframes changeColor1{
+  0% {
+    background:$inColor;
+  }
+  25% {
+    background:$color
+  }
+  50% {
+    background:$color
+  }
+  75% {
+    background:$color
+  }
+  100% {
+    background:$inColor;
+  }
+}
+
+
+@keyframes changeColor2{
+  0% {
+    background:$color
+  }
+  25% {
+    background:$inColor;
+  }
+  50% {
+    background:$color
+  }
+  75% {
+    background:$color
+  }
+  100% {
+    background:$color
+  }
+}
+
+
+@keyframes changeColor3{
+  0% {
+    background:$color
+  }
+  25% {
+    background:$color
+  }
+  50% {
+    background:$inColor;
+  }
+  75% {
+    background:$color
+  }
+  100% {
+    background:$color
+  }
+}
+
+
+@keyframes changeColor4{
+  0% {
+    background:$color
+  }
+  25% {
+    background:$color
+  }
+  50% {
+    background:$color
+  }
+  75% {
+    background:$inColor;
+  }
+  100% {
+    background:$color
+  }
+}

src/components/CircleLoading/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.scss';
+const CircleLoading = () => {
+  return (
+    <div className="load"></div>
+  );
+};
+
+export default CircleLoading;

src/components/CircleLoading/index.scss

@@ -0,0 +1,46 @@
+.load {
+  width: 50px;
+  height: 50px;
+  margin: 0 auto;
+  position: relative;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: rgba(0, 169, 178,.2);;
+  &::before {
+    content: "";
+    width: 70px; // 50 * √2
+    height: 70px; // 50 * √2
+    background-color: #00adb5;
+    position: absolute;
+    left: 50%;
+    bottom: 50%;
+    z-index: 1;
+    transform-origin: left bottom;
+    animation: rotate 1.5s infinite linear;
+  }
+  &::after {
+    content: "";
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    background-color: #fff;
+    z-index: 2;
+    border-radius: 50%;
+  }
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/LoopCircleLoading/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import  './index.scss';
+const LoopCircleLoading = () => {
+  return (
+    <div className="load-container-loopCircle">
+      <div className="container container1">
+        <div className="circle circle1"></div>
+        <div className="circle circle2"></div>
+        <div className="circle circle3"></div>
+        <div className="circle circle4"></div>
+      </div>
+      <div className="container container2">
+        <div className="circle circle1"></div>
+        <div className="circle circle2"></div>
+        <div className="circle circle3"></div>
+        <div className="circle circle4"></div>
+      </div>
+      <div className="container container3">
+        <div className="circle circle1"></div>
+        <div className="circle circle2"></div>
+        <div className="circle circle3"></div>
+        <div className="circle circle4"></div>
+      </div>
+    </div>
+  );
+};
+
+export default LoopCircleLoading;

src/components/LoopCircleLoading/index.scss

@@ -0,0 +1,136 @@
+@mixin circle() {
+  width: 12px;
+  height: 12px;
+  background-color: #00adb5;
+
+  border-radius: 100%;
+  position: absolute;
+  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
+  animation: bouncedelay 1.2s infinite ease-in-out;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+@mixin container() {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  .circle {
+    @include circle();
+  }
+  .circle1 {
+    top: 0;
+    left: 0;
+  }
+  .circle2 {
+    top: 0;
+    right: 0;
+  }
+  .circle3 {
+    right: 0;
+    bottom: 0;
+  }
+  .circle4 {
+    left: 0;
+    bottom: 0;
+  }
+}
+
+.load-container-loopCircle {
+  margin: 50px auto;
+  width: 48px;
+  height: 48px;
+  position: relative;
+  .container1 {
+    @include container();
+    .circle2 {
+      @include circle();
+      -webkit-animation-delay: -0.9s;
+      animation-delay: -0.9s;
+    }
+    .circle3 {
+      @include circle();
+      -webkit-animation-delay: -0.6s;
+      animation-delay: -0.6s;
+    }
+    .circle4 {
+      @include circle();
+      -webkit-animation-delay: -0.3s;
+      animation-delay: -0.3s;
+    }
+  }
+  .container2 {
+    @include container();
+    -webkit-transform: rotateZ(45deg);
+    transform: rotateZ(45deg);
+    .circle1 {
+      @include circle();
+      -webkit-animation-delay: -1.1s;
+      animation-delay: -1.1s;
+    }
+    .circle2 {
+      @include circle();
+      -webkit-animation-delay: -0.8s;
+      animation-delay: -0.8s;
+    }
+    .circle3 {
+      @include circle();
+      -webkit-animation-delay: -0.5s;
+      animation-delay: -0.5s;
+    }
+    .circle4 {
+      @include circle();
+      -webkit-animation-delay: -0.2s;
+      animation-delay: -0.2s;
+    }
+  }
+  .container3 {
+    @include container();
+    -webkit-transform: rotateZ(90deg);
+    transform: rotateZ(90deg);
+    .circle1 {
+      @include circle();
+      -webkit-animation-delay: -1s;
+      animation-delay: -1s;
+    }
+    .circle2 {
+      @include circle();
+      -webkit-animation-delay: -0.7s;
+      animation-delay: -0.7s;
+    }
+    .circle3 {
+      @include circle();
+      -webkit-animation-delay: -0.4s;
+      animation-delay: -0.4s;
+    }
+    .circle4 {
+      @include circle();
+      -webkit-animation-delay: -0.1s;
+      animation-delay: -0.1s;
+    }
+  }
+}
+
+@-webkit-keyframes bouncedelay {
+  0%,
+  80%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes bouncedelay {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}

src/components/TransverseLoading/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.scss';
+const TransverseLoading = () => {
+  return (
+    <div className="load-container-transverse">
+      <div className="load1"></div>
+      <div className="load2"></div>
+      <div className="load3"></div>
+    </div>
+  );
+};
+
+export default TransverseLoading;