feat: 新增BlockReserveLoading, DisappearedLoading等组件

README.md

@@ -28,23 +28,33 @@ import { BoxLoading } from 'react-loadingg'
 |  ----  | ----  | ---- |---- |
 | BlockLoading  | ✅ | ✅  | ✅ |
 | BoxLoading  | ✅ | 🚧  | ✅ |
+| BlockReserveLoading  | ✅ | ✅  | ✅ |
 | CircleLoading  | ✅ | 🚧  | ✅ |
+| CircleToBlockLoading  | ✅ | 🚧 | ✅ |
 | CommonLoading  | ✅ |  🚧 | ✅ |
+| DisappearedLoading  | ✅ | ✅  | ✅ |
 | LoopCircleLoading  |✅  |  🚧 | ✅ |
+| NineCellLoading  | ✅ | ✅  | ✅ |
+| TouchBallLoading  | ✅ | ✅  | ✅ |
 | TransverseLoading  | ✅ |  🚧 | ✅ |
 | WaveLoading  |  ✅| 🚧  |  ✅ |
-| CircleToBlockLoading  | ✅ | 🚧 | ✅ |
+| WaveTopBottomLoading  | ✅ | ✅  | ✅ |
 
 #### ❤️  组件列表
 
 - [x]  BlockLoading 
 - [x]  BoxLoading
+- [x]  BlockReserveLoading
 - [x]  CircleLoading
+- [x]  CircleToBlockLoading
 - [x]  CommonLoading
+- [x]  DisappearedLoading
 - [x]  LoopCircleLoading
+- [x]  NineCellLoading
+- [x]  TouchBallLoading
 - [x]  TransverseLoading
 - [x]  WaveLoading
-- [x]  CircleToBlockLoading
+- [x]  WaveTopBottomLoading
 - [ ]  持续开发中...
 
 

src/components/BlockReserveLoading/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const animate = keyframes`
+  50% {
+    transform: rotateY(-180deg);
+  }
+  100% {
+    transform: rotateY(-180deg) rotateX(-180deg);
+  }
+`;
+
+const LoadingContainer = styled.div`
+  perspective: 120px;
+  width: 120px;
+  height: 120px;
+  position: relative;
+`;
+
+const Item = styled.div`
+  margin: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 30%;
+  height: 30%;
+  transform: rotate(0);
+  background: ${props => props.color || '#00adb5'};
+animation: ${animate} ${props => props.speed || 1}s infinite;
+`;
+
+const BlockReserveLoading = ({ style, color, speed }) => {
+  return (
+    <LoadingContainer style={style}>
+      <Item color={color} speed={speed} />
+    </LoadingContainer>
+  );
+};
+
+export default BlockReserveLoading;

src/components/CircleLoading/index.js

@@ -48,15 +48,15 @@ const LoadingContainer = styled.div`
     top: 0;
     bottom: 0;
     margin: auto;
-    background-color: #fff;
+    background-color:  ${props => props.inColor || '#fff'};
     z-index: 2;
     border-radius: 50%;
   }
 `;
 
-const CircleLoading = ({ style, color }) => {
+const CircleLoading = ({ style, color, inColor }) => {
   return (
-    <LoadingContainer style={style} color={color} />
+    <LoadingContainer style={style} color={color} inColor={inColor} />
   );
 };
 

src/components/DisappearedLoading/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const animate = keyframes`
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+`;
+
+const LoadingContainer = styled.div`
+  width: 80px;
+  height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-flow: nowrap;
+`;
+
+const Item = styled.div`
+  width: 20%;
+  height: 20%;
+  border-radius: 50%;
+  background: ${props => props.color || '#00adb5'};
+  animation: ${animate} ${props => props.speed || 0.8}s ease-in-out alternate infinite;
+`;
+
+const ItemFirst = styled(Item)`
+  animation-delay: -${props => props.speed / 2 || 0.4}s;
+`;
+
+const ItemTwo = styled(Item)`
+  animation-delay:  -${props => props.speed / 4 || 0.2}s;
+`;
+
+const Disappearedloading = ({ style, color, speed }) => {
+  return (
+    <LoadingContainer style={style}>
+      <ItemFirst color={color} speed={speed} />
+      <ItemTwo color={color} speed={speed} />
+      <Item color={color} speed={speed} />
+    </LoadingContainer>
+  );
+};
+
+export default Disappearedloading;

src/components/NineCellLoading/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const animate = keyframes`
+  to {
+    opacity: 0.3;
+  }
+`;
+
+const LoadContainer = styled.div`
+  width: 5em;
+  height: 5em;
+  display: grid;
+  grid-template-rows: repeat(3, 1fr);
+  grid-template-columns: repeat(3, 1fr);
+  justify-items: center;
+  align-items: center;
+  > div:nth-child(2) > div:nth-child(4) {
+    animation-delay: ${props => props.speed * (1 / 6) || 0.25}s;
+  }
+  > div:nth-of-type(3),
+  > div:nth-of-type(5),
+  > div:nth-of-type(7) {
+    animation-delay: ${props => props.speed / 3 || 0.5}s;
+  }
+  > div:nth-of-type(6),
+  > div:nth-of-type(8) {
+    animation-delay: ${props => props.speed / 2 || 0.75}s;
+  }
+  > div:nth-of-type(9) {
+    animation-delay: ${props => props.speed * (2 / 3) || 1}s;
+  }
+`;
+
+const Item = styled.div`
+  width: 0.8em;
+  height: 0.8em;
+  background-color: ${props => props.color || '#00adb5'};
+  border-radius: 50%;
+animation: ${animate} ${props => props.speed || 1.5}s alternate ease-in-out infinite;
+`;
+
+const NineCellLoading = ({ style, color, speed }) => {
+  return (
+    <LoadContainer style={style} speed={speed}>
+      {
+       Array.from(Array(9)).map(() => <Item color={color} speed={speed} />)
+      }
+    </LoadContainer>
+  );
+};
+
+export default NineCellLoading;

src/components/TouchBallLoading/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const leftAnimate = keyframes`
+  50%,
+  100% {
+    transform: translateX(95%);
+  }
+`
+
+const rightAnimate = keyframes`
+  50% {
+    transform: translateX(-95%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+`
+
+const LoadingContainer = styled.div`
+  width: 80px;
+  height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-flow: nowrap;
+`;
+
+const Item = styled.div`
+   width: 20%;
+  height: 20%;
+  border-radius: 50%;
+  background: ${props => props.color || '#00adb5'};
+`;
+
+const ItemLeft = styled(Item)`
+  transform: translateX(-100%);
+  animation: ${leftAnimate} ${props => props.speed || 1}s ease-in alternate infinite ;
+`
+
+const ItemRight = styled(Item)`
+  transform: translateX(-95%);
+  animation: ${rightAnimate} ${props => props.speed || 1}s ease-out alternate infinite ;
+`
+
+const TouchBallLoading = ({ style, color, speed }) => {
+  return (
+    <LoadingContainer style={style}>
+      <ItemLeft color={color} speed={speed} />
+      <Item color={color} />
+      <ItemRight color={color} speed={speed} />
+    </LoadingContainer>
+  );
+};
+
+export default TouchBallLoading;

src/components/TransverseLoading/index.js

@@ -20,7 +20,7 @@ const LoadingContainer = styled.div`
 const load = styled.div`
   width: 20px;
   height: 20px;
-  background-color: ${props => props.color || '#00adb5;'};
+  background-color: ${props => props.color || '#00adb5'};
   border-radius: 100%;
   display: inline-block;
   animation: ${bouncedelay} 1.4s infinite ease-in-out;

src/components/WaveTopBottomLoading/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const animate = keyframes`
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(100%);
+  }
+`;
+
+const LoadingContainer = styled.div`
+  width: 80px;
+  height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-flow: nowrap;
+`;
+
+const Item = styled.div`
+  width: 20%;
+  height: 20%;
+  border-radius: 50%;
+  background: ${props => props.color || '#00adb5'};
+  animation: ${animate} ${props => props.speed || 0.8}s ease-in-out alternate infinite;
+`;
+
+const ItemFirst = styled(Item)`
+  animation-delay: -${props => props.speed / 2 || 0.4}s;
+`;
+
+const ItemTwo = styled(Item)`
+  animation-delay:  -${props => props.speed / 4 || 0.2}s;
+`;
+
+const WaveTopBottomLoading = ({ style, color, speed }) => {
+  return (
+    <LoadingContainer style={style}>
+      <ItemFirst color={color} speed={speed} />
+      <ItemTwo color={color} speed={speed} />
+      <Item color={color} speed={speed} />
+    </LoadingContainer>
+  );
+};
+
+export default WaveTopBottomLoading;

src/components/index.js

@@ -6,3 +6,8 @@ export { default as TransverseLoading } from './TransverseLoading';
 export { default as BlockLoading } from './BlockLoading';
 export { default as BoxLoading  } from './BoxLoading'
 export { default as CircleToBlockLoading } from './CircleToBlockLoading'
+export { default as TouchBallLoading } from './TouchBallLoading'
+export { default as DisappearedLoading } from './DisappearedLoading'
+export { default as BlockReserveLoading } from './BlockReserveLoading'
+export { default as WaveTopBottomLoading } from './WaveTopBottomLoading'
+export { default as NineCellLoading } from './NineCellLoading'

src/stories/BlockReserveLoading.stories.js

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

src/stories/DisappearedLoading.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { DisappearedLoading } from '~/components';
+import Container from './compoment/Container';
+storiesOf('DisappearedLoading', module)
+  .addDecorator(withKnobs)
+  .add('DisappearedLoading', () => {
+    return (
+      <Container>
+        <DisappearedLoading style={{ margin: "100px 60px" }}></DisappearedLoading>
+      </Container>
+    );
+  });

src/stories/TouchBallLoading.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { TouchBallLoading } from '~/components';
+import Container from './compoment/Container';
+storiesOf('TouchBallLoading', module)
+  .addDecorator(withKnobs)
+  .add('TouchBallLoading', () => {
+    return (
+      <Container>
+        <TouchBallLoading style={{ width: 100, height: 100 }} speed={1}></TouchBallLoading>
+      </Container>
+    );
+  });

src/stories/WaveTopBottomLoading.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { WaveTopBottomLoading } from '~/components';
+import Container from './compoment/Container';
+storiesOf('WaveTopBottomLoading', module)
+  .addDecorator(withKnobs)
+  .add('WaveTopBottomLoading', () => {
+    return (
+      <Container>
+        <WaveTopBottomLoading style={{ margin: "100px 60px" }}></WaveTopBottomLoading>
+      </Container>
+    );
+  });