feat: 新增Loading动画, 修改主页

Summer-andy · Dec 29, 2019 · 0908bd4 · 0908bd4
1 parent 73bbfb9
commit 0908bd4
Show file tree

Hide file tree

Showing 9 changed files with 290 additions and 66 deletions.
diff --git a/README-zh-Hans.md b/README-zh-Hans.md
@@ -81,6 +81,8 @@ import { BoxLoading } from 'react-loadingg';
 | PassThrouthLoading   | ✅    | ✅    | ✅   | ✅    |
 | CoffeeLoading   | ✅    | ✅    | ✅   | ✅    |
 | BatteryLoading   | ✅    | ✅    | ✅   | ✅    |
+| DiamonLoading   | ✅    | ✅    |  🔨  | ✅    |
+| EatLoading   | ✅    | ✅    |  🔨  | ✅    |
 #### ⌨️ 组件开发
 
 首次运行项目

diff --git a/README.md b/README.md
@@ -83,6 +83,8 @@ import { BoxLoading } from 'react-loadingg';
 | PassThrouthLoading   | ✅    | ✅    | ✅   | ✅    |
 | CoffeeLoading   | ✅    | ✅    | ✅   | ✅    |
 | BatteryLoading   | ✅    | ✅    | ✅   | ✅    |
+| DiamonLoading   | ✅    | ✅    |  🔨  | ✅    |
+| EatLoading   | ✅    | ✅    |  🔨  | ✅    |
 #### ⌨️ Participate in development
 
 Running the project for the first time

diff --git a/src/components/DiamondLoading/index.js b/src/components/DiamondLoading/index.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { commonStyle, sizeItem } from '../utils/style';
+
+const load = keyframes`
+ 0% {
+ top: 19px;
+ left: 19px;
+}
+ 100% {
+}
+`;
+
+const Container = styled.div`
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin: 75px;
+  display: inline-block;
+  vertical-align: middle;
+`;
+
+const ItemDiv = styled.div`
+  position: absolute;
+  animation: ${load} ${props => props.speed || 1}s ease alternate infinite;
+  transform: scale(0.2);
+  &::before {
+    position: absolute;
+    content: '';
+    left: 50px;
+    top: 0;
+    width: 50px;
+    height: 80px;
+    background: ${props => props.color || '#00adb5'} ;
+    border-radius: 50px 50px 0 0;
+    transform: rotate(-45deg);
+    transform-origin: 0 100%;
+  }
+  &::after {
+    position: absolute;
+    content: '';
+    left: 50px;
+    top: 0;
+    width: 50px;
+    height: 80px;
+    background:${props => props.color || '#00adb5'} ;
+    border-radius: 50px 50px 0 0;
+    left: 0;
+    transform: rotate(45deg);
+    transform-origin: 100% 100%;
+  }
+`;
+
+const ItemFirst = styled(ItemDiv)`
+  top: 0;
+  left: 30px;
+`;
+
+const ItemTwo = styled(ItemDiv)`
+  left: 60px;
+  top: 30px;
+`;
+
+const ItemThree = styled(ItemDiv)`
+  top: 60px;
+  left: 30px;
+`;
+
+const ItemFour = styled(ItemDiv)`
+  left: 0;
+  top: 30px;
+`;
+
+const DiamonLoading = ({ style = commonStyle, speed, color }) => {
+  return (
+    <Container {...{ style, speed, color }}>
+      <ItemFirst color={color} speed={speed}></ItemFirst>
+      <ItemTwo color={color} speed={speed} />
+      <ItemThree color={color} speed={speed} />
+      <ItemFour color={color} speed={speed} />
+    </Container>
+  );
+};
+
+export default DiamonLoading;
diff --git a/src/components/EatLoading/index.js b/src/components/EatLoading/index.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { commonStyle, sizeItem } from '../utils/style';
+
+const load = keyframes`
+ 0% {
+ transform: rotate(0deg);
+}
+ 100% {
+ transform: rotate(-360deg);
+}
+`;
+
+const Container = styled.div`
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  margin: 75px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 8px dotted ${props => props.color || '#00adb5'} ;
+  transition: all 1s ease;
+  animation: ${load} ${props => props.speed || 1}s linear infinite;
+  border-bottom-width: 1px;
+  border-bottom-color: ${props => props.color || '#00adb5'} ;
+  border-left-width: 2px;
+  border-left-color:  ${props => props.color || '#00adb5'} ;
+  border-top-width: 3px;
+  border-right-width: 4px;
+  border-top-color:  ${props => props.color || '#00adb5'} ;
+`;
+
+const ItemDiv = styled.div`
+  position: absolute;
+  top: 45px;
+  left: 25px;
+  width: 0px;
+  height: 0px;
+  border-right: 12px solid transparent;
+  border-top: 12px solid ${props => props.color || '#00adb5'} ;
+  border-left: 12px solid ${props => props.color || '#00adb5'} ;
+  border-bottom: 12px solid ${props => props.color || '#00adb5'} ;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+`;
+
+const EatLoading = ({ style = commonStyle, speed, color }) => {
+  return (
+    <Container {...{ style, speed, color }}>
+      <ItemDiv color={color}></ItemDiv>
+    </Container>
+  );
+};
+
+export default EatLoading;
diff --git a/src/components/index.js b/src/components/index.js
@@ -28,3 +28,5 @@ export { default as ThreeHorseLoading } from  './ThreeHorseLoading';
 export { default as PassThrouthLoading } from './PassThrouthLoading'
 export { default as CoffeeLoading } from './CoffeeLoading'
 export { default as BatteryLoading } from './BatteryLoading'
+export {  default as EatLoading } from './EatLoading'
+export { default as DiamonLoading } from './DiamondLoading'
diff --git a/src/stories/DiamonLoading.stories.js b/src/stories/DiamonLoading.stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number, text, radios  } from '@storybook/addon-knobs';
+import { DiamonLoading } from '~/components';
+import Container from './compoment/Container';
+storiesOf('DiamonLoading', module)
+  .addDecorator(withKnobs)
+  .add('DiamonLoading', () => {
+    let speed = 1;
+    let color = '';
+    speed = number('动画速度(s)')
+    color = text('颜色')
+    // let size = radios(
+    //   '动画尺寸',
+    //   {
+    //     'small': 'small',
+    //     'default': 'default',
+    //     'large': 'large'
+    //   },
+    //   'default'
+    // );
+    return (
+      <Container>
+        <DiamonLoading speed={speed} color={color} ></DiamonLoading>
+      </Container>
+    );
+  });
diff --git a/src/stories/EatLoading.stories.js b/src/stories/EatLoading.stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number, text, radios  } from '@storybook/addon-knobs';
+import { EatLoading } from '~/components';
+import Container from './compoment/Container';
+storiesOf('EatLoading', module)
+  .addDecorator(withKnobs)
+  .add('EatLoading', () => {
+    let speed = 1;
+    let color = '';
+    speed = number('动画速度(s)')
+    color = text('颜色')
+    // let size = radios(
+    //   '动画尺寸',
+    //   {
+    //     'small': 'small',
+    //     'default': 'default',
+    //     'large': 'large'
+    //   },
+    //   'default'
+    // );
+    return (
+      <Container>
+        <EatLoading speed={speed} color={color} ></EatLoading>
+      </Container>
+    );
+  });
diff --git a/src/stories/compoment/DemoContainer.js b/src/stories/compoment/DemoContainer.js
@@ -29,7 +29,9 @@ import {
   ThreeHorseLoading,
   PassThrouthLoading,
   BatteryLoading,
-  CoffeeLoading
+  CoffeeLoading,
+  DiamonLoading,
+  EatLoading
 } from '~/components';
 import './style.scss';
 
@@ -101,95 +103,104 @@ const DemoContainer = () => {
       </div>
       <div className="component">
         <div className="item" onClick={() => setName('CommonLoading')}>
-          <CommonLoading  speed={2} color={color}/>
+          <CommonLoading  speed={2} color="#00e676" />
         </div>
         <div className="item"  onClick={() => setName('NineCellLoading')}>
-          <NineCellLoading  speed={1.5} color={color} size="small"/>
+          <NineCellLoading  speed={1.5} color="#ff5722" size="small"/>
         </div>
         <div className="item"  onClick={() => setName('BlockLoading')}>
-          <BlockLoading  color={color}/>
+          <BlockLoading  color="#f50057"/>
         </div>
         <div className="item"  onClick={() => setName('BabelLoading')}>
-          <BabelLoading  speed={3} color={color}/>
+          <BabelLoading  speed={3} color="#ffd223"/>
         </div>
         <div className="item"  onClick={() => setName('CircleToBlockLoading')}>
-          <CircleToBlockLoading speed={3} color={color}/>
+          <CircleToBlockLoading speed={3} color="#08e"/>
         </div>
         <div className="item"  onClick={() => setName('LoopCircleLoading')}>
-          <LoopCircleLoading  color={color}/>
+          <LoopCircleLoading  color="#2323d2"/>
         </div>
         <div className="item"  onClick={() => setName('WindMillLoading')}>
-          <WindMillLoading  color={color}/>
+          <WindMillLoading  color="#876ddd"/>
         </div>
         <div className="item"  onClick={() => setName('BoxLoading')}>
-          <BoxLoading speed={0.7}  color={color}/>
+          <BoxLoading speed={0.7}  color="#d500f9"/>
         </div>
         <div className="item"  onClick={() => setName('DisappearedLoading')}>
-          <DisappearedLoading  color={color}/>
+          <DisappearedLoading  color="#f6e1e1"/>
         </div>
         <div className="item"  onClick={() => setName('TouchBallLoading')}>
-          <TouchBallLoading  color={color}/>
+          <TouchBallLoading  color="#ff9d76"/>
         </div>
         <div className="item"  onClick={() => setName('TransverseLoading')}>
-          <TransverseLoading style={{ ...style }} color={color}/>
+          <TransverseLoading style={{ ...style }} color="#eb4d55"/>
         </div>
         <div className="item"  onClick={() => setName('WaveLoading')}>
-          <WaveLoading  color={color}/>
+          <WaveLoading  color="#d3f4ff"/>
         </div>
         <div className="item"  onClick={() => setName('WaveTopBottomLoading')}>
-          <WaveTopBottomLoading  color={color}/>
+          <WaveTopBottomLoading  color="#e7a4e4"/>
         </div>
         <div className="item"  onClick={() => setName('CircleLoading')}>
-          <CircleLoading  inColor="#090a1e" speed={2} color={color}/>
+          <CircleLoading  inColor="#090a1e" speed={2} color="#42dee1"/>
         </div>
         <div className="item"  onClick={() => setName('BlockReserveLoading')}>
-          <BlockReserveLoading  speed={2} color={color}/>
+          <BlockReserveLoading  speed={2} color="#6decb9"/>
         </div>
         <div className="item"  onClick={() => setName('JumpCircleLoading')}>
-          <JumpCircleLoading style={style} speed={0.5} color={color} size="default"/>
+          <JumpCircleLoading style={style} speed={0.5} color="#eef5b2" size="default"/>
         </div>
         <div className="item"  onClick={() => setName('MeteorRainLoading')}>
-          <MeteorRainLoading style={style} speed={3} color={color} size="default"/>
+          <MeteorRainLoading style={style} speed={3} color="#851de0" size="default"/>
         </div>
         <div className="item"  onClick={() => setName('RotateCircleLoading')}>
-          <RotateCircleLoading style={style} speed={2} color={color} size="default"/>
+          <RotateCircleLoading style={style} speed={2} color="#aa26da" size="default"/>
         </div>
         <div className="item"  onClick={() => setName('StickyBallLoading')}>
-          <StickyBallLoading style={style} speed={3} color={color} size="default"/>
+          <StickyBallLoading style={style} speed={3} color="#c355f5" size="default"/>
         </div>
         <div className="item"  onClick={() => setName('SemipolarLoading')}>
-          <SemipolarLoading style={style} speed={2} color={color} size="default"/>
+          <SemipolarLoading style={style} speed={2} color="#f1fa3c" size="default"/>
         </div>
         <div className="item"  onClick={() => setName('SolarSystemLoading')}>
-          <SolarSystemLoading style={style} speed={2} color={color} size="default"/>
+          <SolarSystemLoading style={style} speed={2} color="#f8b400" size="default"/>
         </div>
         <div className="item"  onClick={() => setName('LadderLoading')}>
-          <LadderLoading style={style} speed={4} color={color} size="default"/>
+          <LadderLoading style={style} speed={4} color="#faf5e4" size="default"/>
         </div>
         <div className="item"  onClick={() => setName('HeartBoomLoading')}>
-          <HeartBoomLoading style={style} speed={2} color={color} size="default"/>
+          <HeartBoomLoading style={style} speed={2} color="#e13a9d" size="default"/>
         </div>
         <div className="item"  onClick={() => setName('RollBoxLoading')}>
-          <RollBoxLoading style={style} speed={2} color={color} size="default"/>
+          <RollBoxLoading style={style} speed={2} color="#004445" size="default"/>
         </div>
         <div className="item"  onClick={() => setName('RectGraduallyShowLoading')}>
-          <RectGraduallyShowLoading style={style} speed={2} color={color} size="default"/>
+          <RectGraduallyShowLoading style={style} speed={2} color="#fe9801" size="default"/>
         </div>
 
         <div className="item"  onClick={() => setName('PointSpreadLoading')}>
-          <PointSpreadLoading  speed={2} color={color} size="default"/>
+          <PointSpreadLoading  speed={2} color="#ccda46" size="default"/>
         </div>
         <div className="item"  onClick={() => setName('ThreeHorseLoading')}>
-          <ThreeHorseLoading  speed={2} color={color} size="small"/>
+          <ThreeHorseLoading  speed={2} color="#50d890" size="small"/>
         </div>
         <div className="item"  onClick={() => setName('PassThrouthLoading')}>
-          <PassThrouthLoading  speed={2} color={color} size="default"/>
+          <PassThrouthLoading  speed={2} color="#e13a9d" size="default"/>
         </div>
-        <div className="item"  onClick={() => setName('ThreeHorseLoading')}>
-          <BatteryLoading  speed={2} color={color} size="small"/>
+        <div className="item"  onClick={() => setName('BatteryLoading')}>
+          <BatteryLoading  speed={2} color="#9b45e4" size="small"/>
         </div>
-        <div className="item"  onClick={() => setName('PassThrouthLoading')}>
-          <CoffeeLoading  speed={2} color={color} size="small"/>
+        <div className="item"  onClick={() => setName('CoffeeLoading')}>
+          <CoffeeLoading  speed={2} color="#fcc169" size="small"/>
+        </div>
+        <div className="item"  onClick={() => setName('DiamonLoading')}>
+          <DiamonLoading  speed={2} color="#9b45e4" size="small"/>
+        </div>
+        <div className="item"  onClick={() => setName('EatLoading')}>
+          <EatLoading  speed={2} color="#fcc169" size="small"/>
+        </div>
+        <div className="item" >
+          {/* <EatLoading  speed={2} color="#fcc169" size="small"/> */}
         </div>
       </div>
     </div>