[REVIEW] Add Loader component

src/Atoms/Loader/Loader.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  width: 75px;
+  height: 15px;
+  margin: 20px auto;
+
+  & > * {
+    animation: opacity 1s infinite;
+    width: 15px;
+    height: 15px;
+    margin: 0 5px;
+    -webkit-border-radius: 100%;
+    -moz-border-radius: 100%;
+    border-radius: 100%;
+    background-color: ${({ theme }) => theme.colors.primary};
+    float: left;
+  }
+
+  @keyframes opacity {
+    0%, 100% { opacity: 1; }
+    60% { opacity: 0; }
+  }
+`
+
+const BallOne = styled.div`
+  animation-delay: 0.1s;
+`
+const BallTwo = styled.div`
+  animation-delay: 0.3s;
+`
+const BallThree = styled.div`
+  animation-delay: 0.5s;
+`
+
+const Loader = ({ children }) => (
+  <Container>
+    <BallOne/>
+    <BallTwo/>
+    <BallThree/>
+  </Container>
+)
+
+export default Loader

src/Atoms/Loader/Loader.stories.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+
+import Loader from './index'
+
+import markdown from './README.md'
+
+export default {
+  title: 'Atoms/Loader',
+}
+
+export const loader = () => (
+  <Loader />
+)
+
+loader.story = {
+  parameters: {
+    notes: { markdown },
+    jest:  [],
+  },
+}

src/Atoms/Loader/README.md

@@ -0,0 +1 @@
+## Loader

src/Atoms/Loader/index.js

@@ -0,0 +1,3 @@
+import Loader from './Loader'
+
+export default Loader

src/Atoms/index.js

@@ -7,3 +7,4 @@ export { default as Typo } from './Typo'
 export { default as Banner } from './Banner'
 export { default as Tooltip } from './Tooltip'
 export { default as Byte } from './Byte'
+export { default as Loader } from './Loader'

src/index.js

@@ -8,3 +8,4 @@ export { Typo } from './Atoms'
 export { Banner } from './Atoms'
 export { Tooltip } from './Atoms'
 export { Byte } from './Atoms'
+export { Loader } from './Atoms'