feat(added three dots spinner from quopa): added three pulsing dots s…

…pinner from quopa into zrc

src/components/atoms/README.md

@@ -14,6 +14,7 @@ Atoms are usually made with only one single HTML element.
 - [`<Link />`](#/Components/Atoms/Link)
 - [`<SidekickCard />`](#/Components/Atoms/SidekickCard)
 - [`<Spinner />`](#/Components/Atoms/Spinner)
+- [`<ThreeDotsSpinner />`](#/Components/Atoms/ThreeDotsSpinner)
 - [`<Text />`](#/Components/Atoms/Text)
 
 ### Tips

src/components/atoms/Spinner/Spinner.md

@@ -27,3 +27,11 @@ import { Spinner } from '@zopauk/react-components';
 
 <Spinner styling="negative" />;
 ```
+
+ThreeDotsSpinner:
+
+```ts
+import { ThreeDotsSpinner } from '@zopauk/react-components';
+
+<ThreeDotsSpinner />;
+```

src/components/atoms/Spinner/ThreeDotsSpinner.tsx

@@ -0,0 +1,57 @@
+import styled, { keyframes } from 'styled-components';
+import { colors } from '../../../constants/colors';
+
+const animateDots = keyframes`
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 2.5em 0 -1.3em;
+  }
+    40% {
+      box-shadow: 0 2.5em 0 0;qq
+  }
+`;
+
+const ThreeDotsSpinner = styled.div`
+  color: ${colors.brand};
+  font-size: 6px;
+  margin: 36px auto;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  animation-delay: -0.16s;
+
+  &,
+  &:before,
+  &:after {
+    border-radius: 50%;
+    width: 2.5em;
+    height: 2.5em;
+    animation-fill-mode: both;
+    animation: ${animateDots} 1.8s infinite ease-in-out;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+  }
+
+  &:before {
+    left: -3.5em;
+    animation-delay: -0.32s;
+  }
+
+  &:after {
+    left: 3.5em;
+    animation-delay: 0.64s;
+  }
+`;
+
+export default ThreeDotsSpinner;

src/index.ts

@@ -30,6 +30,7 @@ export { default as Dropdown } from './components/atoms/Dropdown/Dropdown';
 export { Option as DropdownOption } from './components/atoms/Dropdown/Dropdown';
 export { default as DropdownFiltered } from './components/molecules/DropdownFiltered/DropdownFiltered';
 export { default as Spinner } from './components/atoms/Spinner/Spinner';
+export { default as ThreeDotsSpinner } from './components/atoms/Spinner/ThreeDotsSpinner';
 export { default as ErrorMessage } from './components/atoms/ErrorMessage/ErrorMessage';
 export { default as InputLabel } from './components/atoms/InputLabel/InputLabel';
 export { default as InputRange } from './components/atoms/InputRange/InputRange';