Added loader

package.json

@@ -6,12 +6,6 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "eslint": "^7.8.1",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.2",
     "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",

src/components/Loader/Loader.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './loader.scss';
+
+const Loader = ({ loaderColor }) => {
+  return (
+    <div className='loader'>
+      <span
+        class='loader__circle'
+        style={{
+          background: loaderColor,
+        }}
+      ></span>
+      <span
+        class='loader__circle'
+        style={{
+          background: loaderColor,
+        }}
+      ></span>
+      <span
+        class='loader__circle'
+        style={{
+          background: loaderColor,
+        }}
+      ></span>
+      <span
+        class='loader__circle'
+        style={{
+          background: loaderColor,
+        }}
+      ></span>
+    </div>
+  );
+};
+
+Loader.propTypes = {
+  loaderColor: PropTypes.string,
+};
+
+export default Loader;

src/components/Loader/loader.scss

@@ -0,0 +1,43 @@
+@import '../../sass/base.scss';
+@import '../../sass/variables.scss';
+
+.loader{
+  height: 15px;
+  width: 105px;
+  display: flex;
+  position: relative;
+
+  &__circle{
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background-color: $indigo;
+    animation: move 500ms linear 0ms infinite;
+    margin-right: 30px;
+
+    &:first-child{
+      position: absolute;
+      top:0;
+      left:0;
+      animation: grow 500ms linear 0ms infinite;
+    }
+
+    &:last-child{
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin-right: 0;
+      animation: grow 500ms linear 0s infinite reverse;
+    }
+  }
+}
+
+@keyframes grow {
+  from {transform: scale(0,0); opacity: 0;}
+  to {transform: scale(1,1); opacity: 1;}
+}
+
+@keyframes move {
+  from {transform: translateX(0px)}
+  to {transform: translateX(45px)}
+}

src/stories/LayoutLoader.stories.js

@@ -4,9 +4,20 @@ import LayoutLoader from '../components/LayoutLoader/LayoutLoader';
 export default { title: 'LayoutLoader' };
 
 export const layoutLoader = () => (
-  <LayoutLoader style={{
-    borderRadius: '0.25rem',
-    height: '2.5rem',
-    width: '25rem'
-  }}/>
+  <div style={{
+    display: 'flex',
+    alignItems: 'center'
+  }}>
+    <LayoutLoader style={{
+      borderRadius: '50%',
+      height: '5rem',
+      width: '5rem',
+      marginRight:'0.5rem'
+    }} />
+    <LayoutLoader style={{
+      borderRadius: '0.25rem',
+      height: '2.5rem',
+      width: '15rem'
+    }} />
+  </div>
 )

src/stories/Loader.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Loader from '../components/Loader/Loader';
+
+export default { title: 'Loader' };
+
+export const loader = () => (
+  <Loader />
+)
+
+export const loaderColored = () => (
+  <Loader loaderColor="#010101"/>
+)