Complete spinner component

src/components/Spinner/index.tsx

@@ -1,7 +1,16 @@
 import { Wrapper } from './styles';
 
-const Spinner = () => {
+type SpinnerProps = {
-  return <Wrapper></Wrapper>;
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+  fullScreen?: boolean;
+};
+
+const Spinner = ({ fullScreen = false, color = 'client' }: SpinnerProps) => {
+  return (
+    <Wrapper fullScreen={fullScreen} color={color}>
+      <div className='lds-dual-ring'></div>
+    </Wrapper>
+  );
 };
 
 export default Spinner;

src/components/Spinner/styles.ts

@@ -1,3 +1,50 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Wrapper = styled.div``;
+type WrapperProps = {
+  color?: 'client' | 'productOwner' | 'developer' | 'admin';
+  fullScreen?: boolean;
+};
+
+export const Wrapper = styled.div<WrapperProps>`
+  ${({ fullScreen }) =>
+    fullScreen &&
+    css`
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 99;
+    `}
+
+  .lds-dual-ring {
+    display: inline-block;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-dual-ring:after {
+    content: ' ';
+    display: block;
+    width: 35px;
+    height: 35px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 6px solid
+      ${({ theme, color }) =>
+        color ? theme.colors[color].main : theme.colors.client.main};
+    border-color: ${({ theme, color }) =>
+        color ? theme.colors[color].main : theme.colors.client.main}
+      transparent
+      ${({ theme, color }) =>
+        color ? theme.colors[color].main : theme.colors.client.main}
+      transparent;
+    animation: lds-dual-ring 1.2s linear infinite;
+  }
+  @keyframes lds-dual-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;

src/components/index.tsx

@@ -1,4 +1,5 @@
 import Button from './Button';
+import IconButton from './IconButton';
 import Box from './Box';
 import Text from './Text';
 import Link from './Link';
@@ -8,7 +9,19 @@ import Select from './Select';
 import Search from './Search';
 import Avatar from './Avatar';
 import ContextMenu from './ContextMenu';
+import Spinner from './Spinner';
 
+export {
+  Button,
+  IconButton,
+  Box,
+  Text,
+  Link,
+  Input,
+  TextArea,
+  Select,
   Search,
   Avatar,
   ContextMenu,
+  Spinner,
+};