Merge pull request #775 from valpinkman/polish/cleaner-progession

smoother progress bar

src/components/base/Progress/index.js

@@ -6,10 +6,17 @@ import Box from 'components/base/Box'
 
 const inifiteAnimation = keyframes`
   0% {
-    left: 0
+    left: -18%;
+    width: 20%;
   }
+
+  50% {
+    left: 98%;
+  }
+
   100% {
-    left: 102%
+    left: -18%;
+    width: 20%;
   }
 `
 
@@ -45,7 +52,7 @@ const Progression = styled(Bar).attrs({
   ${p =>
     p.infinite
       ? `
-    animation: 1000ms ${inifiteAnimation} ease-out infinite;
+    animation: ${p.timing}ms ${inifiteAnimation} infinite;
     `
       : `
     animation: ${p.timing}ms ${fillInAnimation} ease-out;
@@ -70,7 +77,7 @@ class Progress extends Component<Props, State> {
 
   render() {
     const { infinite, color, timing } = this.props
-    const styles = infinite ? { width: '20%' } : { width: '100%' }
+    const styles = infinite ? { width: '0%' } : { width: '100%' }
     return (
       <Bar>
         <Progression infinite={infinite} color={color} style={styles} timing={timing} />

src/components/base/Progress/stories.js

@@ -0,0 +1,25 @@
+// @flow
+
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { text, number, boolean } from '@storybook/addon-knobs'
+
+import Progress from 'components/base/Progress'
+
+const stories = storiesOf('Components/base', module)
+
+stories.add('Progress (infinite)', () => (
+  <Progress
+    infinite={boolean('infinite', true)}
+    timing={number('timing (ms)', 3000)}
+    color={text('color (css or from theme)', 'wallet')}
+  />
+))
+stories.add('Progress', () => (
+  <Progress
+    infinite={boolean('infinite', false)}
+    timing={number('timing (ms)', 3000)}
+    color={text('color (css or from theme)', 'wallet')}
+  />
+))