Merge pull request #547 from LiskHQ/546-spinner

Add Spinner component - Closes #546

.storybook/config.js

@@ -7,6 +7,7 @@ function loadStories() {
   require('../src/components/formattedNumber/stories');
   require('../src/components/toaster/stories');
   require('../src/components/send/stories');
+  require('../src/components/spinner/stories');
 }
 
 configure(loadStories, module);

src/components/spinner/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './spinner.css';
+
+const Spinner = () => (
+  <span className={styles.spinner}>
+    <div className={styles.bounce1} />
+    <div className={styles.bounce2} />
+    <div className={styles.bounce3} />
+  </span>
+);
+
+export default Spinner;

src/components/spinner/index.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import Spinner from './index';
+
+describe('Spinner', () => {
+  it('should render 1 span and 3 divs', () => {
+    const wrapper = mount(<Spinner />);
+    expect(wrapper.find('span')).to.have.lengthOf(1);
+    expect(wrapper.find('div')).to.have.lengthOf(3);
+  });
+});
+

src/components/spinner/spinner.css

@@ -0,0 +1,41 @@
+.spinner {
+  width: 40px;
+  text-align: center;
+  display: inline-block;
+}
+
+.bounce1, .bounce2, .bounce3 {
+  width: 8px;
+  height: 8px;
+  background-color: #aaa;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+.bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+// Spinner animations
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0.5) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}

src/components/spinner/stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Spinner from './';
+
+storiesOf('Spinner', module)
+  .add('default', () => (
+    <Spinner/>
+  ));