feat: 新增CircleToBlockLoading组件

README.md

@@ -32,6 +32,7 @@ import { BoxLoading } from 'react-loadingg'
 - [x]  LoopCircleLoading
 - [x]  TransverseLoading
 - [x]  WaveLoading
+- [x]  CircleToBlockLoading
 - [ ]  持续开发中...
 
 

src/components/CircleToBlockLoading/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './style.scss';
+const CircleToBlockLoading = ({ style }) => {
+  return (
+    <div className="load-container-block" style={style}>
+      <div className="circleToBlock">
+        <div className="circleToBlock-item"></div>
+        <div className="circleToBlock-item"></div>
+        <div className="circleToBlock-item"></div>
+      </div>
+    </div>
+  );
+};
+
+export default CircleToBlockLoading;

src/components/CircleToBlockLoading/style.scss

@@ -0,0 +1,45 @@
+.circleToBlock {
+  height: 100px;
+  width: 100px;
+  margin: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  align-items: center;
+  .circleToBlock-item {
+    height: 20px;
+    width: 20px;
+    background-color: #00adb5;
+    position: absolute;
+    margin: auto;
+    border-radius: 2px;
+    transform: translateY(0) rotate(45deg) scale(0);
+    animation: changeSharp 3s linear infinite;
+  }
+  .circleToBlock-item:nth-of-type(1) {
+    animation-delay:  calc(3s * 2 / -1.5);
+  }
+  .circleToBlock-item:nth-of-type(2) {
+    animation-delay:  calc(3s * 3 / -1.5);
+  }
+  .circleToBlock-item:nth-of-type(3) {
+    animation-delay:  calc(3s * 4 / -1.5);
+  }
+}
+
+@keyframes changeSharp {
+  0% {
+    transform: translateX(0) rotate(45deg) scale(0);
+  }
+  50% {
+    transform: translateX(250%) rotate(45deg) scale(1);
+  }
+  100% {
+    transform: translateX(500%) rotate(45deg) scale(0);
+  }
+}

src/components/index.js

@@ -1,8 +1,8 @@
-// export { default as BoxLoading } from './BoxLoading';
 export { default as CommonLoading } from './CommonLoading';
 export { default as WaveLoading } from './WaveLoading';
 export { default as CircleLoading } from './CircleLoading';
 export { default as LoopCircleLoading } from './LoopCircleLoading';
 export { default as TransverseLoading } from './TransverseLoading';
 export { default as BlockLoading } from './BlockLoading';
 export { default as BoxLoading  } from './BoxLoading'
+export { default as CircleToBlockLoading } from './CircleToBlockLoading'

src/stories/CircleToBlockLoading.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { CircleToBlockLoading } from '~/components';
+import Container from './compoment/Container';
+storiesOf('CircleToBlock', module)
+  .addDecorator(withKnobs)
+  .add(
+    'CircleToBlock',
+    () => {
+      return (
+        <Container>
+          <CircleToBlockLoading></CircleToBlockLoading>
+        </Container>
+      );
+    }
+  );

src/stories/compoment/DemoContainer.js

@@ -4,9 +4,9 @@ import {
   WaveLoading,
   BlockLoading,
   BoxLoading,
-  CircleLoading,
   LoopCircleLoading,
   TransverseLoading,
+  CircleToBlockLoading
 } from '~/components';
 import './style.scss';
 const DemoContainer = () => {
@@ -48,7 +48,7 @@ const DemoContainer = () => {
           <BoxLoading style={{ margin: '25px auto' }} />
         </div>
         <div className="item">
-          <CircleLoading />
+          <CircleToBlockLoading />
         </div>
         <div className="item">
           <LoopCircleLoading />