feat: 新增5个Loading组件

README.md

@@ -53,6 +53,11 @@ import { BoxLoading } from 'react-loadingg'
 | WaveLoading          | ✅    | 🚧    | ✅    |
 | WaveTopBottomLoading | ✅    | ✅    | ✅    |
 | WindMillLoading      | ✅    | ✅    | ✅    |
+| JumpCircleLoading    | ✅    | ✅    | ✅    |
+| MeteorRainLoading    | ✅    | ✅    | ✅    |
+| RotateCircleLoading  | ✅    | ✅    | ✅    |
+| StickyBallLoading    | ✅    | ✅    | ✅    |
+| SemipolarLoading     | ✅    | ✅    | ✅    |
 #### ❤️ 组件列表
 
 - [x] BlockLoading
@@ -70,6 +75,11 @@ import { BoxLoading } from 'react-loadingg'
 - [x] WaveTopBottomLoading
 - [x] WindMillLoading
 - [x] BabelLoading
+- [x] JumpCircleLoading
+- [x] MeteorRainLoading
+- [x] RotateCircleLoading
+- [x] StickyBallLoading
+- [x] SemipolarLoading
 - [ ] 持续开发中...
 
 #### ⌨️ 组件开发

package.json

@@ -20,7 +20,9 @@
   },
   "keywords": [
     "react",
-    "components"
+    "components",
+    "loading",
+    "react-loading"
   ],
   "files": [
     "lib"

src/components/BlockReserveLoading/index.js

@@ -28,7 +28,7 @@ const Item = styled.div`
   height: 30%;
   transform: rotate(0);
   background: ${props => props.color || '#00adb5'};
-animation: ${animate} ${props => props.speed || 1}s infinite;
+  animation: ${animate} ${props => props.speed || 1}s infinite;
 `;
 
 const BlockReserveLoading = ({ style, color, speed }) => {

src/components/JumpCircleLoading/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const bounce = keyframes`
+  0% {
+    transform: translateY(0);
+    width: 22px;
+    height: 14px;
+  }
+  30% {
+    width: 18px;
+    height: 18px;
+  }
+  100% {
+    background-color: #f9c094;
+    transform: translateY(-40px);
+  }
+`;
+
+const LoadContainer = styled.div`
+  width: 50px;
+  height: 64px;
+  position: relative;
+  overflow: hidden;
+`;
+
+const Circle = styled.div`
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  position: absolute;
+  bottom: 4px;
+  left: 16px;
+  background-color: ${props => props.color || '#00adb5' };
+  animation: ${bounce} ${props => props.speed || 0.5}s ease-out infinite alternate;
+`;
+
+const BottomReac = styled.div`
+  width: 28px;
+  height: 4px;
+  position: absolute;
+  bottom: 0px;
+  left: 11px;
+  background-color: ${props => props.color || '#00adb5' };
+`
+
+
+const JumpCircleLoading = ({ style, color, speed }) => {
+  return (
+    <LoadContainer style={style}>
+      <Circle color={color} speed={speed}/>
+      <BottomReac color={color}/>
+    </LoadContainer>
+  );
+};
+
+export default JumpCircleLoading;

src/components/MeteorRainLoading/index.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const scaling = keyframes`
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 40px;
+  }
+  100% {
+    width: 0;
+  }
+`;
+
+const moveTo = keyframes`
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(60px);
+  }
+`;
+
+const LoadContainer = styled.div`
+  width: 80px;
+  height: 80px;
+  position: relative;
+  transform: rotateZ(45deg);
+  > div:nth-of-type(1) {
+    top: 30%;
+    left: 25%;
+    animation-delay: 0s;
+  }
+  > div:nth-of-type(2) {
+    top: 10%;
+    left: 0%;
+    animation-delay: 0.8s;
+  }
+  > div:nth-of-type(3) {
+    top: 15%;
+    left: 10%;
+    animation-delay: 0.5s;
+  }
+  > div:nth-of-type(4) {
+    top: 25%;
+    left: 30%;
+    animation-delay: 1.6s;
+  }
+  > div:nth-of-type(5) {
+    top: 40%;
+    left: 4%;
+    animation-delay: 3.2s;
+  }
+  > div:nth-of-type(6) {
+    top: 55%;
+    left: 18%;
+    animation-delay: 1.2s;
+  }
+  > div:nth-of-type(7) {
+    top: 66%;
+    left: 3%;
+    animation-delay: 0.4s;
+  }
+  > div:nth-of-type(8) {
+    top: 77%;
+    left: 24%;
+    animation-delay: 2s;
+  }
+  > div:nth-of-type(9) {
+    top: 83%;
+    left: 30%;
+    animation-delay: 1s;
+  }
+`;
+
+const Star = styled.div`
+  height: 2px;
+  background: linear-gradient(-45deg, #00adb5, rgba(0, 0, 255, 0));
+  position: absolute;
+  border-radius: 50%;
+  /* filter: drop-shadow(0 0 6px #c7ecee); */
+  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 }) => {
+  return (
+    <LoadContainer style={style}>
+      {
+       Array.from(Array(9)).map((item, index) => <Star color={color} speed={speed} key={index}/>)
+      }
+    </LoadContainer>
+  );
+};
+
+export default MeteorRainLoading;

src/components/NineCellLoading/index.js

@@ -44,7 +44,7 @@ const NineCellLoading = ({ style, color, speed }) => {
   return (
     <LoadContainer style={style} speed={speed}>
       {
-       Array.from(Array(9)).map(() => <Item color={color} speed={speed} />)
+       Array.from(Array(9)).map((item, index) => <Item color={color} speed={speed} key={index}/>)
       }
     </LoadContainer>
   );

src/components/RotateCircleLoading/index.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const rotate = keyframes`
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+const opacityChange = keyframes`
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.3;
+  }
+`
+
+const LoadContainer = styled.div`
+  width: 30px;
+  height: 30px;
+  position: relative;
+  overflow: hidden;
+  animation: ${rotate} ${props => props.speed || 2.4 }s linear infinite;
+  > div {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    position: absolute;
+    background-color: ${props => props.color || '#00adb5' };
+    animation: ${opacityChange} ${props => props.speed || 2.4 }s linear infinite alternate;
+  }
+  > div:nth-of-type(1) {
+    animation-delay: 0s;
+  }
+  > div:nth-of-type(2) {
+    animation-delay: ${props => props.speed/3 || 0.8}s;
+  }
+  > div:nth-of-type(3) {
+    animation-delay: ${props => props.speed/3 * 2 || 1.6}s;
+  }
+  > div:nth-of-type(4) {
+    animation-delay: ${props => props.speed/3 * 3 || 2.4}s;
+  }
+`;
+
+const CircleOne = styled.div`
+  left: 0;
+  top: 0;
+  animation-delay: 0s;
+`
+
+const CircleTwo = styled.div`
+  right: 0;
+  top: 0;
+`
+
+const CircleThree = styled.div`
+  left: 0;
+  bottom: 0;
+`
+
+const CircleFour = styled.div`
+  right: 0;
+  bottom: 0;
+`
+
+const RotateCircleLoading = ({ style, color, speed }) => {
+  return (
+    <LoadContainer style={style} speed={speed}>
+      <CircleOne color={color} speed={speed} />
+      <CircleTwo color={color} speed={speed} />
+      <CircleThree color={color} speed={speed} />
+      <CircleFour color={color} speed={speed} />
+    </LoadContainer>
+  );
+};
+
+export default RotateCircleLoading;

src/components/SemipolarLoading/index.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const rotate = keyframes`
+  50% {
+    transform: rotate(360deg) scale(0.7);
+  }
+`;
+
+
+const LoadContainer = styled.div`
+  width: 50px;
+  height: 50px;
+  position: relative;
+  /* overflow: hidden; */
+  > div:nth-child(1) {
+    height: calc(50px - 50px * 0.2 * 0);
+    width: calc(50px - 50px * 0.2 * 0);
+    top: calc(50px * 0.1 * 0);
+    left: calc(50px * 0.1 * 0);
+    animation: ${rotate} ${props => props.speed || 2}s infinite;
+    animation-delay: calc(${props => props.speed || 2}s * 0.1 * 4);
+    z-index: 5;
+  }
+  > div:nth-child(2) {
+    height: calc(50px - 50px * 0.2 * 1);
+    width: calc(50px - 50px * 0.2 * 1);
+    top: calc(50px * 0.1 * 1);
+    left: calc(50px * 0.1 * 1);
+    animation: ${rotate} ${props => props.speed || 2}s infinite;
+    animation-delay: calc(${props => props.speed || 2}s * 0.1 * 3);
+    z-index: 4;
+  }
+  > div:nth-child(3) {
+    height: calc(50px - 50px * 0.2 * 2);
+    width: calc(50px - 50px * 0.2 * 2);
+    top: calc(50px * 0.1 * 2);
+    left: calc(50px * 0.1 * 2);
+    animation: ${rotate} ${props => props.speed || 2}s infinite;
+    animation-delay: calc(${props => props.speed || 2}s * 0.1 * 2);
+    z-index: 3;
+  }
+  > div:nth-child(4) {
+    height: calc(50px - 50px * 0.2 * 3);
+    width: calc(50px - 50px * 0.2 * 3);
+    top: calc(50px * 0.1 * 3);
+    left: calc(50px * 0.1 * 3);
+    animation: ${rotate} ${props => props.speed || 2}s infinite;
+    animation-delay: calc(${props => props.speed || 2}s * 0.1 * 1);
+    z-index: 2;
+  }
+  > div:nth-child(5) {
+    height: calc(50px - 50px * 0.2 * 4);
+    width: calc(50px - 50px * 0.2 * 4);
+    top: calc(50px * 0.1 * 4);
+    left: calc(50px * 0.1 * 4);
+    animation: ${rotate} ${props => props.speed || 2}s infinite;
+    animation-delay: calc(${props => props.speed || 2}s * 0.1 * 0);
+    z-index: 1;
+  }
+`;
+
+const HalfCircle = styled.div`
+  box-sizing: border-box;
+  border-radius: 50%;
+  position: absolute;
+  border: calc(50px * 0.05) solid transparent;
+  border-top-color: ${props => props.color || '#00adb5'};
+  border-left-color: ${props => props.color || '#00adb5'};
+`
+
+const SemipolarLoading = ({ style, color, speed }) => {
+  return (
+    <LoadContainer style={style}>
+      {
+        Array.from(Array(5)).map((item, index) => <HalfCircle color={color} speed={speed} key={index}/>)
+      }
+    </LoadContainer>
+  );
+};
+
+export default SemipolarLoading;