feat: add five new loading component

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-loadingg",
   "version": "1.5.2",
-  "description": "A React component library.",
+  "description": "A load animation component library based on React",
   "main": "lib/hui.js",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

src/components/RectGraduallyShowLoading/index.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const gradualShowDispear = keyframes`
+  0% {
+    opacity: 0.3;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  65% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.3;
+  }
+`;
+
+const gradualDispear = keyframes`
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%)
+  }
+`;
+
+const LoadContainer = styled.div`
+  width: ${props => props.size === 'small' ? 56 : (props.size === 'large' ? 64 : 60)}px;
+  height: ${props => props.size === 'small' ? 12 : (props.size === 'large' ? 20 : 16)}px;
+  position: relative;
+  overflow: hidden;
+`;
+
+const RectBig = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: ${props => props.color || '#00adb5'};
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  top: 0;
+  animation: ${gradualDispear} ${props => props.speed || 4}s linear infinite;
+`
+
+const RectSmallWrap = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  >div {
+    animation: ${gradualShowDispear} ${props => props.speed || 4}s ease-in-out infinite;
+  }
+  >div:nth-of-type(8) {
+    animation-delay: 0s;
+  }
+  >div:nth-of-type(7) {
+    animation-delay: ${props => props.speed/16*1 || 4/16*1}s;
+  }
+  >div:nth-of-type(6) {
+    animation-delay: ${props => props.speed/16*2 || 4/16*2}s;
+  }
+  >div:nth-of-type(5) {
+    animation-delay: ${props => props.speed/16*3 || 4/16*3}s;
+  }
+  >div:nth-of-type(4) {
+    animation-delay: ${props => props.speed/16*4 || 4/16*4}s;
+  }
+  >div:nth-of-type(3) {
+    animation-delay: ${props => props.speed/16*5 || 4/16*5}s;
+  }
+  >div:nth-of-type(2) {
+    animation-delay: ${props => props.speed/16*6 || 4/16*6}s;
+  }
+  >div:nth-of-type(1) {
+    animation-delay: ${props => props.speed/16*7 || 4/16*7}s;
+  }
+`
+
+const RectSmall = styled.div`
+  width: 12.5%;
+  height: 100%;
+  background-color: ${props => props.color || '#00adb5'};
+`
+
+const RectGraduallyShowLoading = ({ style, color, speed, size }) => {
+  return (
+    <LoadContainer style={style} speed={speed} color={color} size={size}>
+      {/* <RectBig speed={speed} color={color} size={size} /> */}
+      <RectSmallWrap>
+        {
+          Array.from(Array(8)).map((item, index) => <RectSmall speed={speed} color={color} size={size} key={index}/>)
+        }
+      </RectSmallWrap>
+    </LoadContainer>
+  );
+};
+
+export default RectGraduallyShowLoading;

src/components/index.js

@@ -22,3 +22,4 @@ export { default as SolarSystemLoading } from './SolarSystemLoading';
 export { default as LadderLoading } from './LadderLoading';
 export { default as HeartBoomLoading } from './HeartBoomLoading';
 export { default as RollBoxLoading } from './RollBoxLoading';
+export { default as RectGraduallyShowLoading } from './RectGraduallyShowLoading';

src/stories/RectGraduallyShowLoading.stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number, text } from '@storybook/addon-knobs';
+import { RectGraduallyShowLoading } from '~/components';
+import Container from './compoment/Container';
+storiesOf('RectGraduallyShowLoading', module)
+  .addDecorator(withKnobs)
+  .add(
+    'RectGraduallyShowLoading',
+    () => {
+      let speed = 2;
+      let color = '';
+      let size = '';
+      speed = number('动画速度(s)');
+      color = text('颜色');
+      size = text('尺寸');
+      return (
+        <Container>
+          <RectGraduallyShowLoading speed={speed} color={color} size={size}></RectGraduallyShowLoading>
+        </Container>
+      );
+    }
+  );

src/stories/RollBoxLoading.stories.js

@@ -8,7 +8,7 @@ storiesOf('RollBoxLoading', module)
   .add(
     'RollBoxLoading',
     () => {
-      let speed = 1.5;
+      let speed = 2;
       let color = '';
       let size = '';
       speed = number('动画速度(s)');

src/stories/compoment/DemoContainer.js

@@ -23,7 +23,8 @@ import {
   SolarSystemLoading,
   LadderLoading,
   HeartBoomLoading,
-  RollBoxLoading
+  RollBoxLoading,
+  RectGraduallyShowLoading
 } from '~/components';
 import './style.scss';
 
@@ -164,7 +165,10 @@ const DemoContainer = () => {
           <HeartBoomLoading style={style} speed={2} color={color} size="default"/>
         </div>
         <div className="item"  onClick={() => setName('RollBoxLoading')}>
-          <RollBoxLoading style={style} speed={1.5} color={color} size="default"/>
+          <RollBoxLoading style={style} speed={2} color={color} size="default"/>
+        </div>
+        <div className="item"  onClick={() => setName('RectGraduallyShowLoading')}>
+          <RectGraduallyShowLoading style={style} speed={2} color={color} size="default"/>
         </div>
       </div>
     </div>