feat: add RollBoxLoading component

Summer-andy · Dec 4, 2019 · ccb7ecc · ccb7ecc
1 parent 7a2469e
commit ccb7ecc
Show file tree

Hide file tree

Showing 24 changed files with 432 additions and 181 deletions.
diff --git a/src/components/BlockLoading/animate.js b/src/components/BlockLoading/animate.js
@@ -1,6 +1,6 @@
 import  { keyframes } from 'styled-components';
 const $InColor = '#f9c094';
-const $color = '#00adb5'
+const $color = '#00adb5';
 const Rotate = keyframes`
   0% {
     transform: rotate(0deg);

diff --git a/src/components/BlockLoading/index.js b/src/components/BlockLoading/index.js
@@ -32,7 +32,7 @@ const ItemFour = styled(Item)`
   animation: ${animateFour} ${props => props.speed / 4 || 2}s infinite ease-in-out;
 `;
 
-const BlockLoading = ({ style, speed }) => {
+const BlockLoading = ({ style, speed, color }) => {
   return (
     <LoadContainer style={style} speed={speed}>
       <ItemFirst speed={speed}></ItemFirst>

diff --git a/src/components/HeartBoomLoading/index.js b/src/components/HeartBoomLoading/index.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const boom = keyframes`
+  0% {
+    transform: rotate(45deg) scale(1);
+  }
+  20% {
+    transform: rotate(45deg) scale(1.1);
+  }
+  40% {
+    transform: rotate(45deg) scale(1);
+  }
+  60% {
+    transform: rotate(45deg) scale(1.2);
+  }
+  100% {
+    transform: rotate(45deg) scale(1);
+  }
+`;
+
+
+const LoadContainer = styled.div`
+  width: 50px;
+  height: 50px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* overflow: hidden; */
+`;
+
+const Heart = styled.div`
+  width: ${props => props.size === 'small' ? 22 : (props.size === 'large' ? 30 : 26)}px;
+  height: ${props => props.size === 'small' ? 22 : (props.size === 'large' ? 30 : 26)}px;
+  background-color: ${props => props.color || '#00adb5'};
+  position: relative;
+  transform: rotate(45deg);
+  animation: ${boom} ${props => props.speed || 2}s ease infinite;
+  &::before {
+    content: '';
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: ${props => props.color || '#00adb5'};
+    position: absolute;
+    left: -50%;
+    bottom: 0;
+  }
+  &::after {
+    content: '';
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: ${props => props.color || '#00adb5'};
+    position: absolute;
+    top: -50%;
+    right: 0;
+  }
+`
+
+const HeartBoomLoading = ({ style, color, speed, size }) => {
+  return (
+    <LoadContainer style={style}>
+      <Heart color={color} speed={speed} size={size}/>
+    </LoadContainer>
+  );
+};
+
+export default HeartBoomLoading;
diff --git a/src/components/JumpCircleLoading/index.js b/src/components/JumpCircleLoading/index.js
@@ -3,13 +3,10 @@ import styled, { keyframes } from 'styled-components';
 
 const bounce = keyframes`
   0% {
-    transform: translateY(0);
-    width: 22px;
-    height: 14px;
+    transform: translateY(0) scaleX(1.2) scaleY(0.8);
   }
-  30% {
-    width: 18px;
-    height: 18px;
+  25% {
+    transform: translateY(-10px) scaleX(1) scaleY(1);
   }
   100% {
     background-color: #f9c094;
@@ -22,34 +19,35 @@ const LoadContainer = styled.div`
   height: 64px;
   position: relative;
   overflow: hidden;
+  transform: scaleX()
 `;
 
 const Circle = styled.div`
-  width: 18px;
-  height: 18px;
+  width: ${props => props.size === 'small' ? 12 : (props.size === 'large' ? 20 : 16)}px;
+  height: ${props => props.size === 'small' ? 12 : (props.size === 'large' ? 20 : 16)}px;
   border-radius: 50%;
   position: absolute;
   bottom: 4px;
-  left: 16px;
+  left: ${props => props.size === 'small' ? 19 : (props.size === 'large' ? 15 : 17)}px;
   background-color: ${props => props.color || '#00adb5' };
   animation: ${bounce} ${props => props.speed || 0.5}s ease-out infinite alternate;
 `;
 
 const BottomReac = styled.div`
-  width: 28px;
+  width: ${props => props.size === 'small' ? 24 : (props.size === 'large' ? 32 : 28)}px;
   height: 4px;
   position: absolute;
   bottom: 0px;
-  left: 11px;
+  left: ${props => props.size === 'small' ? 13 : (props.size === 'large' ? 9 : 11)}px;
   background-color: ${props => props.color || '#00adb5' };
 `
 
 
-const JumpCircleLoading = ({ style, color, speed }) => {
+const JumpCircleLoading = ({ style, color, speed, size }) => {
   return (
     <LoadContainer style={style}>
-      <Circle color={color} speed={speed}/>
-      <BottomReac color={color}/>
+      <Circle color={color} speed={speed} size={size}/>
+      <BottomReac color={color} size={size}/>
     </LoadContainer>
   );
 };

diff --git a/src/components/LadderLoading/index.js b/src/components/LadderLoading/index.js
@@ -3,88 +3,88 @@ import styled, { keyframes } from 'styled-components';
 
 const leftLadderMove = keyframes`
   0% {
-    transform: translateY(64px);
+    transform: translateY(68px);
   }
   10%,
   50% {
     transform: translateY(0);
   }
   60%,
   100% {
-    transform: translateY(-64px);
+    transform: translateY(-68px);
   }
 `;
 
 const rightLadderMove = keyframes`
   0%, 
   40% {
-    transform: translateY(64px);
+    transform: translateY(68px);
   }
   50%,
   90% {
     transform: translateY(0);
   }
   100% {
-    transform: translateY(-64px);
+    transform: translateY(-68px);
   }
 `;
 
 const RowLadderOneMove = keyframes`
   0%, 
   10% {
-    transform: translateY(64px);
+    transform: translateY(68px);
   }
   20%,
   60% {
     transform: translateY(0);
   }
   70%,
   100% {
-    transform: translateY(-64px);
+    transform: translateY(-68px);
   }
 `;
 
 const RowLadderTwoMove = keyframes`
   0%, 
   20% {
-    transform: translateY(64px);
+    transform: translateY(68px);
   }
   30%,
   70% {
     transform: translateY(0);
   }
   80%,
   100% {
-    transform: translateY(-64px);
+    transform: translateY(-68px);
   }
 `;
 
 const RowLadderThreeMove = keyframes`
   0%, 
   30% {
-    transform: translateY(64px);
+    transform: translateY(68px);
   }
   40%,
   80% {
     transform: translateY(0);
   }
   90%,
   100% {
-    transform: translateY(-64px);
+    transform: translateY(-68px);
   }
 `;
 
 const LoadContainer = styled.div`
-  width: 20px;
-  height: 64px;
+  width: ${props => props.size === 'small' ? 16 : (props.size === 'large' ? 24 : 20)}px;
+  height: ${props => props.size === 'small' ? 60 : (props.size === 'large' ? 68 : 64)}px;
   position: relative;
   overflow: hidden;
 `;
 
 const LeftLadder = styled.div`
   height: 0;
 	width: 1px;
-	border-bottom: 64px solid ${props => props.color || '#00adb5'};
+	border-bottom: ${props => props.size === 'small' ? 60 : (props.size === 'large' ? 68 : 64)}px solid ${props => props.color || '#00adb5'};
 	border-left: 1px solid transparent;
 	border-right: 1px solid transparent;
   position: absolute;
@@ -96,7 +96,7 @@ const LeftLadder = styled.div`
 const RightLadder = styled.div`
   height: 0;
 	width: 1px;
-	border-bottom: 64px solid ${props => props.color || '#00adb5'};
+	border-bottom: ${props => props.size === 'small' ? 60 : (props.size === 'large' ? 68 : 64)}px solid ${props => props.color || '#00adb5'};
 	border-left: 1px solid transparent;
 	border-right: 1px solid transparent;
   position: absolute;
@@ -138,14 +138,14 @@ const RowLadderThree = styled.div`
   animation: ${RowLadderThreeMove} ${props => props.speed || 4}s ease infinite;
 `
 
-const LadderLoading = ({ style, color, speed }) => {
+const LadderLoading = ({ style, color, speed, size }) => {
   return (
     <LoadContainer style={style}>
-      <LeftLadder color={color} speed={speed}/>
-      <RightLadder color={color} speed={speed}/>
-      <RowLadderOne color={color} speed={speed}/>
-      <RowLadderTwo color={color} speed={speed}/>
-      <RowLadderThree color={color} speed={speed}/>
+      <LeftLadder color={color} speed={speed} size={size}/>
+      <RightLadder color={color} speed={speed} size={size}/>
+      <RowLadderOne color={color} speed={speed} size={size}/>
+      <RowLadderTwo color={color} speed={speed} size={size}/>
+      <RowLadderThree color={color} speed={speed} size={size}/>
     </LoadContainer>
   );
 };

diff --git a/src/components/MeteorRainLoading/index.js b/src/components/MeteorRainLoading/index.js
@@ -23,8 +23,8 @@ const moveTo = keyframes`
 `;
 
 const LoadContainer = styled.div`
-  width: 80px;
-  height: 80px;
+  width: ${props => props.size === 'small' ? 68 : (props.size === 'large' ? 88 : 80)}px;
+  height: ${props => props.size === 'small' ? 68 : (props.size === 'large' ? 88 : 80)}px;
   position: relative;
   transform: rotateZ(45deg);
   > div:nth-of-type(1) {
@@ -83,9 +83,9 @@ const Star = styled.div`
   animation: ${scaling} ${props => props.speed || 3}s ease-in-out infinite, ${moveTo} ${props => props.speed || 3}s ease-in-out infinite;
 `
 
-const MeteorRainLoading = ({ style, color, speed }) => {
+const MeteorRainLoading = ({ style, color, speed, size }) => {
   return (
-    <LoadContainer style={style}>
+    <LoadContainer style={style} size={size}>
       {
        Array.from(Array(9)).map((item, index) => <Star color={color} speed={speed} key={index}/>)
       }