From 57f4d0c4673bf86c4d4b776d79fce2ed84bac10c Mon Sep 17 00:00:00 2001
From: Sergio de Almeida Cipriano Junior <sergiosacj@protonmail.com>
Date: Mon, 13 Sep 2021 11:21:43 -0300
Subject: [PATCH] =?UTF-8?q?(#5)=20Criando=20anima=C3=A7=C3=A3o=20para=20o?=
 =?UTF-8?q?=20Loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Emily Sousa <diassousa@yahoo.com.br>
---
 frontend/src/App.tsx                      | 13 ++++---
 frontend/src/components/Loading/index.tsx |  4 +--
 frontend/src/components/Loading/styles.ts | 44 ++++++++++++++++++++++-
 3 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 598d222..dfbcb7b 100644
--- a/frontend/src/App.tsx
+++ b/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 />
     </>
   );
diff --git a/frontend/src/components/Loading/index.tsx b/frontend/src/components/Loading/index.tsx
index 506f294..7256c9c 100644
--- a/frontend/src/components/Loading/index.tsx
+++ b/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>
     );
 };
diff --git a/frontend/src/components/Loading/styles.ts b/frontend/src/components/Loading/styles.ts
index a7800c0..7285e6d 100644
--- a/frontend/src/components/Loading/styles.ts
+++ b/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;
+        }
+    }
 `;