feat: 完成demo

.npmrc

@@ -1 +1 @@
-registry=https://registry.npm.taobao.org/
+registry=https://registry.npmjs.org/

src/components/BlockLoading/index.js

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

src/components/BlockLoading/index.scss

@@ -1,126 +1,133 @@
-$color: #c2f5d3;
+$color: #00adb5;
 $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;
+.load-container-block {
+  position: relative;
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+  .load-block {
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    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);
+    transform: rotate(0deg);
   }
   25% {
-    transform:rotate(90deg);
+    transform: rotate(90deg);
   }
   50% {
-    transform:rotate(180deg);
+    transform: rotate(180deg);
   }
   75% {
-    transform:rotate(270deg);
+    transform: rotate(270deg);
   }
   100% {
-    transform:rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
-
-@keyframes changeColor1{
+@keyframes changeColor1 {
   0% {
-    background:$inColor;
+    background: $inColor;
   }
   25% {
-    background:$color
+    background: $color;
   }
   50% {
-    background:$color
+    background: $color;
   }
   75% {
-    background:$color
+    background: $color;
   }
   100% {
-    background:$inColor;
+    background: $inColor;
   }
 }
 
-
-@keyframes changeColor2{
+@keyframes changeColor2 {
   0% {
-    background:$color
+    background: $color;
   }
   25% {
-    background:$inColor;
+    background: $inColor;
   }
   50% {
-    background:$color
+    background: $color;
   }
   75% {
-    background:$color
+    background: $color;
   }
   100% {
-    background:$color
+    background: $color;
   }
 }
 
-
-@keyframes changeColor3{
+@keyframes changeColor3 {
   0% {
-    background:$color
+    background: $color;
   }
   25% {
-    background:$color
+    background: $color;
   }
   50% {
-    background:$inColor;
+    background: $inColor;
   }
   75% {
-    background:$color
+    background: $color;
   }
   100% {
-    background:$color
+    background: $color;
   }
 }
 
-
-@keyframes changeColor4{
+@keyframes changeColor4 {
   0% {
-    background:$color
+    background: $color;
   }
   25% {
-    background:$color
+    background: $color;
   }
   50% {
-    background:$color
+    background: $color;
   }
   75% {
-    background:$inColor;
+    background: $inColor;
   }
   100% {
-    background:$color
+    background: $color;
   }
 }

src/components/CircleLoading/index.js

@@ -2,7 +2,9 @@ import React from 'react';
 import './index.scss';
 const CircleLoading = () => {
   return (
-    <div className="load"></div>
+    <div className="load-container-block">
+      <div className="load"></div>
+    </div>
   );
 };
 

src/components/CircleLoading/index.scss

@@ -1,11 +1,15 @@
 .load {
+  margin: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   width: 50px;
   height: 50px;
-  margin: 0 auto;
-  position: relative;
   border-radius: 50%;
   overflow: hidden;
-  background-color: rgba(0, 169, 178,.2);;
+  background-color: rgba(0, 169, 178,.2);
   &::before {
     content: "";
     width: 70px; // 50 * √2

src/components/CommonLoading/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
-import  './index.scss';
+import './index.scss';
 const CommonLoading = ({ style }) => {
   return (
-    <svg id="load" x="0px" y="0px" viewBox="0 0 150 150" style={style}>
-    <circle id="loading-inner" cx="75" cy="75" r="60"/>
-  </svg>
+    <div className="load-container-block">
+      <svg id="load" x="0px" y="0px" viewBox="0 0 150 150" style={style}>
+        <circle id="loading-inner" cx="75" cy="75" r="60" />
+      </svg>
+    </div>
   );
 };
 

src/components/CommonLoading/index.scss

@@ -1,4 +1,10 @@
 #load {
+  margin: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   width: 75px;
   animation: loading 3s linear infinite;
   #loading-inner {

src/components/LoopCircleLoading/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import  './index.scss';
 const LoopCircleLoading = () => {
   return (
+    <div className="load-container-block">
     <div className="load-container-loopCircle">
       <div className="container container1">
         <div className="circle circle1"></div>
@@ -22,6 +23,7 @@ const LoopCircleLoading = () => {
         <div className="circle circle4"></div>
       </div>
     </div>
+    </div>
   );
 };
 

src/components/LoopCircleLoading/index.scss

@@ -37,10 +37,14 @@
 }
 
 .load-container-loopCircle {
-  margin: 50px auto;
+  margin: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   width: 48px;
   height: 48px;
-  position: relative;
   .container1 {
     @include container();
     .circle2 {

src/components/TransverseLoading/index.js

@@ -2,10 +2,12 @@ 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 className="load-container-block">
+      <div className="load-container-transverse">
+        <div className="load1"></div>
+        <div className="load2"></div>
+        <div className="load3"></div>
+      </div>
     </div>
   );
 };

src/components/WaveLoading/index.scss

@@ -9,11 +9,18 @@
 }
 
 .load-container {
+
   height: 150px;
   display: flex;
   align-items: center;
   justify-content: center;
   .container {
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     width: 100px;
     height: 60px;
     text-align: center;

src/stories/Demo.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { CommonLoading } from '~/components';
+import Container from './compoment/DemoContainer';
+storiesOf('Demo', module)
+  .addDecorator(withKnobs)
+  .add('Demo', () => {
+    return (
+      <Container>
+
+      </Container>
+    );
+  });