diff --git a/src/Atoms/Loader/Loader.jsx b/src/Atoms/Loader/Loader.jsx
new file mode 100644
index 0000000..eadc11a
--- /dev/null
+++ b/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
diff --git a/src/Atoms/Loader/Loader.stories.jsx b/src/Atoms/Loader/Loader.stories.jsx
new file mode 100644
index 0000000..cef672f
--- /dev/null
+++ b/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:  [],
+  },
+}
diff --git a/src/Atoms/Loader/README.md b/src/Atoms/Loader/README.md
new file mode 100644
index 0000000..0a25607
--- /dev/null
+++ b/src/Atoms/Loader/README.md
@@ -0,0 +1 @@
+## Loader
diff --git a/src/Atoms/Loader/index.js b/src/Atoms/Loader/index.js
new file mode 100644
index 0000000..eb0b743
--- /dev/null
+++ b/src/Atoms/Loader/index.js
@@ -0,0 +1,3 @@
+import Loader from './Loader'
+
+export default Loader
diff --git a/src/Atoms/index.js b/src/Atoms/index.js
index feb9bde..e2dee15 100644
--- a/src/Atoms/index.js
+++ b/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'
diff --git a/src/index.js b/src/index.js
index 0030d36..8b2a91a 100644
--- a/src/index.js
+++ b/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'