feat: 增加组件SolarSystemLoading组件

README.md

@@ -58,6 +58,8 @@ import { BoxLoading } from 'react-loadingg'
 | RotateCircleLoading  | ✅    | ✅    | ✅    |
 | StickyBallLoading    | ✅    | ✅    | ✅    |
 | SemipolarLoading     | ✅    | ✅    | ✅    |
+| SolarSystemLoading   | ✅    | ✅    | ✅    |
+
 #### ❤️ 组件列表
 
 - [x] BlockLoading
@@ -80,6 +82,7 @@ import { BoxLoading } from 'react-loadingg'
 - [x] RotateCircleLoading
 - [x] StickyBallLoading
 - [x] SemipolarLoading
+- [x] SolarSystemLoading
 - [ ] 持续开发中...
 
 #### ⌨️ 组件开发

src/components/SolarSystemLoading/index.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const rotate = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+
+const LoadContainer = styled.div`
+  width: 50px;
+  height: 50px;
+  position: relative;
+  /* overflow: hidden; */
+`;
+
+const Sun = styled.div`
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: ${props => props.color || '#00adb5'};
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -2px;
+  margin-top: -2px;
+`
+
+const FirstTrack = styled.div`
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid;
+  border-color: ${props => props.color || '#00adb5'};
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -15px;
+  margin-top: -15px;
+  box-sizing: border-box;
+  animation: ${rotate} ${props => props.speed || 2}s linear infinite;
+`
+
+const Earth = styled.div`
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: ${props => props.color || '#00adb5'};
+  position: absolute;
+  left: -1px;
+  top: 2px;
+`
+
+const SecondTrack = styled.div`
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: 1px solid;
+  border-color: ${props => props.color || '#00adb5'};
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -30px;
+  margin-top: -30px;
+  box-sizing: border-box;
+  animation: ${rotate} ${props => props.speed * 1.5 || 3}s linear infinite;
+`
+
+const Mars = styled.div`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${props => props.color || '#00adb5'};
+  position: absolute;
+  left: 7px;
+  top: 2px;
+`
+
+const SolarSystemLoading = ({ style, color, speed }) => {
+  return (
+    <LoadContainer style={style}>
+      <Sun color={color}/>
+      <FirstTrack color={color} speed={speed}>
+        <Earth color={color}/>
+      </FirstTrack>
+      <SecondTrack color={color} speed={speed}>
+        <Mars color={color}/>
+      </SecondTrack>
+    </LoadContainer>
+  );
+};
+
+export default SolarSystemLoading;

src/components/index.js

@@ -18,3 +18,4 @@ export { default as MeteorRainLoading } from './MeteorRainLoading'
 export { default as RotateCircleLoading } from './RotateCircleLoading'
 export { default as StickyBallLoading } from './StickyBallLoading'
 export { default as SemipolarLoading } from './SemipolarLoading'
+export { default as SolarSystemLoading } from './SolarSystemLoading'

src/stories/SolarSystemLoading.stories.js

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

src/stories/compoment/DemoContainer.js

@@ -19,7 +19,8 @@ import {
   MeteorRainLoading,
   RotateCircleLoading,
   StickyBallLoading,
-  SemipolarLoading
+  SemipolarLoading,
+  SolarSystemLoading
 } from '~/components';
 import './style.scss';
 const DemoContainer = () => {
@@ -148,6 +149,9 @@ const DemoContainer = () => {
         <div className="item"  onClick={() => setName('SemipolarLoading')}>
           <SemipolarLoading style={style} speed={2}/>
         </div>
+        <div className="item"  onClick={() => setName('SolarSystemLoading')}>
+          <SolarSystemLoading style={style} speed={2}/>
+        </div>
       </div>
     </div>
   );