feat: 新增BlockRotateLoading组件

src/components/BlockRotateLoading/index.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { commonStyle, sizeContainer } from '../utils/style';
+const animate1 = keyframes`
+	100% {
+	transform:rotate(360deg)
+}
+`;
+
+const animate2 = keyframes`
+	0%,100% {
+	transform:scale(0)
+}
+50% {
+	transform:scale(1)
+}
+`;
+
+const LoadingContainer = styled.div`
+  position: relative;
+  width: 45px;
+  height: 45px;
+  margin: 0 auto;
+  animation: ${animate1} 2s linear infinite;
+`;
+
+const Item = styled.div`
+	position:absolute;
+	top:0;
+	width:25px;
+	height:25px;
+	border-radius:100%;
+	background-color: ${props => props.color || '#00adb5'};
+  animation: ${animate2} ${props => props.speed || 2}s ease-in-out infinite;
+`;
+
+const ItemOne = styled(Item)``;
+
+const ItemTwo = styled(Item)`
+  animation-delay: -${props => props.speed  / 2 || 1}s;
+  top:auto;
+	bottom:0;
+`;
+
+const BlockRotateLoading = ({ style = commonStyle, color, speed, size = 'default' }) => {
+  return (
+    <LoadingContainer style={style}>
+      <ItemOne color={color} speed={speed} />
+      <ItemTwo color={color} speed={speed} />
+    </LoadingContainer>
+  );
+};
+
+export default BlockRotateLoading;

src/components/index.js

@@ -30,3 +30,4 @@ export { default as CoffeeLoading } from './CoffeeLoading'
 export { default as BatteryLoading } from './BatteryLoading'
 export {  default as EatLoading } from './EatLoading'
 export { default as DiamonLoading } from './DiamondLoading'
+export { default as  BlockRotateLoading } from './BlockRotateLoading'

src/stories/BlockRotateLoading.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number, text, radios } from '@storybook/addon-knobs';
+import { BlockRotateLoading } from '~/components';
+import Container from './compoment/Container';
+storiesOf('BlockRotateLoading', module)
+  .addDecorator(withKnobs)
+  .add(
+    'BlockRotateLoading',
+    () => {
+      let speed = 1;
+      let color = '';
+      speed = number('动画速度(s)')
+      color = text('颜色')
+      let size = radios(
+        '动画尺寸',
+        {
+          'small': 'small',
+          'default': 'default',
+          'large': 'large'
+        },
+        'default'
+      );
+      return (
+        <Container>
+          <BlockRotateLoading size={size} speed={speed} color={color}></BlockRotateLoading>
+        </Container>
+      );
+    }
+  );

webpack.config.js

@@ -8,7 +8,6 @@ const safePostCssParser = require('postcss-safe-parser');
 
 // Webpack is just a bunch of keys on module.exports!
 module.exports = function(webpackEnv) {
-  console.log(webpackEnv);
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production';
 

yarn.lock

@@ -7710,22 +7710,6 @@ node-libs-browser@^2.2.1:
     util "^0.11.0"
     vm-browserify "^1.0.1"
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-pre-gyp@^0.12.0:
   version "0.12.0"
   resolved "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
@@ -10722,7 +10706,7 @@ tar@^2.0.0:
     fstream "^1.0.12"
     inherits "2"
 
-tar@^4, tar@^4.4.2:
+tar@^4:
   version "4.4.13"
   resolved "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
   integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==