fix: 修复不能更改颜色和速度问题

Summer-andy · Dec 2, 2019 · 539fc78 · 539fc78
1 parent c37ea39
commit 539fc78
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 6 deletions.
diff --git a/src/components/MeteorRainLoading/index.js b/src/components/MeteorRainLoading/index.js
@@ -76,7 +76,7 @@ const LoadContainer = styled.div`
 
 const Star = styled.div`
   height: 2px;
-  background: linear-gradient(-45deg, #00adb5, rgba(0, 0, 255, 0));
+  background: linear-gradient(-45deg, ${props => props.color || '#00adb5'}, rgba(0, 0, 255, 0));
   position: absolute;
   border-radius: 50%;
   /* filter: drop-shadow(0 0 6px #c7ecee); */

diff --git a/src/components/RotateCircleLoading/index.js b/src/components/RotateCircleLoading/index.js
@@ -50,7 +50,6 @@ const LoadContainer = styled.div`
 const CircleOne = styled.div`
   left: 0;
   top: 0;
-  animation-delay: 0s;
 `
 
 const CircleTwo = styled.div`
@@ -70,7 +69,7 @@ const CircleFour = styled.div`
 
 const RotateCircleLoading = ({ style, color, speed }) => {
   return (
-    <LoadContainer style={style} speed={speed}>
+    <LoadContainer style={style} speed={speed} color={color}>
       <CircleOne color={color} speed={speed} />
       <CircleTwo color={color} speed={speed} />
       <CircleThree color={color} speed={speed} />

diff --git a/src/components/SemipolarLoading/index.js b/src/components/SemipolarLoading/index.js
@@ -71,7 +71,7 @@ const HalfCircle = styled.div`
 
 const SemipolarLoading = ({ style, color, speed }) => {
   return (
-    <LoadContainer style={style}>
+    <LoadContainer style={style} speed={speed}>
       {
         Array.from(Array(5)).map((item, index) => <HalfCircle color={color} speed={speed} key={index}/>)
       }

diff --git a/src/stories/JumpCircleLoading.stories.js b/src/stories/JumpCircleLoading.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs,number, text } from '@storybook/addon-knobs';
+import { withKnobs, number, text } from '@storybook/addon-knobs';
 import { JumpCircleLoading } from '~/components';
 import Container from './compoment/Container';
 storiesOf('JumpCircleLoading', module)

diff --git a/src/stories/compoment/DemoContainer.js b/src/stories/compoment/DemoContainer.js
@@ -146,7 +146,7 @@ const DemoContainer = () => {
           <StickyBallLoading style={style} speed={3}/>
         </div>
         <div className="item"  onClick={() => setName('SemipolarLoading')}>
-          <SemipolarLoading style={style} speed={3}/>
+          <SemipolarLoading style={style} speed={2}/>
         </div>
       </div>
     </div>