(#5) Criando animação para o Loading

Co-authored-by: Emily Sousa <diassousa@yahoo.com.br>

frontend/src/App.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 
-import Routes from './routes/index';
-import GlobalStyle from './styles/global';
-import AppProvider from './hooks';
+import GlobalStyle from 'styles/global';
+
+import NavBar from 'components/NavBar';
+import Loading from 'components/Loading';
 
 const App: React.FC = () => {
   return (
     <>
-      <AppProvider>
-        <Routes />
-      </AppProvider>
-
+      <NavBar />
+      <Loading />
       <GlobalStyle />
     </>
   );

frontend/src/components/Loading/index.tsx

@@ -2,10 +2,10 @@ import React from "react";
 
 import { LoadingContainer } from "components/Loading/styles";
 
-const Loading: React.FC = ({}) => {
+const Loading: React.FC = () => {
     return (
         <LoadingContainer>
-            <h1>loading...</h1>
+            <div />
         </LoadingContainer>
     );
 };

frontend/src/components/Loading/styles.ts

@@ -1,5 +1,47 @@
 import styled from "styled-components";
 
 export const LoadingContainer = styled.div`
-    text-align: center;
+    div,
+    div:before,
+    div:after {
+        background: transparent;
+        animation: load1 1s infinite ease-in-out;
+        width: 1em;
+        height: 4em;
+    }
+    div {
+        color: black;
+        text-indent: -9999em;
+        margin: 88px auto;
+        margin-top: 20rem;
+        position: relative;
+        font-size: 3rem;
+        transform: translateZ(0);
+        animation-delay: -0.16s;
+    }
+    div:before,
+    div:after {
+        position: absolute;
+        top: 0;
+        content: "";
+    }
+    div:before {
+        left: -1.5em;
+        animation-delay: -0.32s;
+    }
+    div:after {
+        left: 1.5em;
+    }
+    @keyframes load1 {
+        0%,
+        80%,
+        100% {
+            box-shadow: 0 0;
+            height: 4em;
+        }
+        40% {
+            box-shadow: 0 -2em;
+            height: 5em;
+        }
+    }
 `;