preloader

Author: DragonDark13

src/App.tsx

@@ -26,7 +26,6 @@ const MainPageContent = React.lazy(() => import('./components/MainPageContent/Ma
 const Footer = React.lazy(() => import('./components/Footer/Footer'));
 
 
-
 function App() {
     const [selectedArticle, setSelectedArticle] = useState<number>(0)
     const [selectedSubArticle, setSelectedSubArticle] = useState<null | number>(null);
@@ -94,7 +93,6 @@ function App() {
     }, [allAnswerIsCorrect, selectedArticle, allAnswerIsCorrectFunc]);
 
 
-
     useEffect(() => {
         if (selectedSubArticle !== null) {
             const selectedSubArticleTest = data.historyList[selectedArticle]?.subtopics?.[selectedSubArticle]?.subArticleTest;
@@ -233,7 +231,7 @@ function App() {
                                                    lessonsVisited={7}
                                                    username={currentUser ? currentUser.name : "Петро" +
                                                        " Сагайдачний"}/>
-                                                       :<Preloader/>
+                                               : <Preloader/>
                                            }
                                        </React.Suspense>}
                             />

src/components/Preloader/Preloader.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import "./preloader.scss"
 
 const Preloader = () => {
     return (
-        <div style={{position: "fixed",}} className="preloader_bg">
-            <div>Loading...</div>
+        <div  className="preloader_bg">
+            <div className="loader"></div>
         </div>
     );
 };

src/components/Preloader/preloader.scss

@@ -0,0 +1,66 @@
+.preloader_bg {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,.9);
+  z-index: 2;
+}
+
+.loader {
+  width: 50px;
+  aspect-ratio: 1;
+  color: #5ad2e1;
+  animation: l40 .5s infinite alternate;
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.loader:before,
+.loader:after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-size: 25px 25px;
+  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
+  background-repeat: no-repeat;
+}
+
+.loader:before {
+  background-image: radial-gradient(farthest-side at top left, currentColor 96%, #0000),
+  radial-gradient(farthest-side at top right, currentColor 96%, #0000),
+  radial-gradient(farthest-side at bottom right, currentColor 96%, #0000),
+  radial-gradient(farthest-side at bottom left, currentColor 96%, #0000);
+  animation: l40-1 1s infinite;
+}
+
+.loader:after {
+  background-image: radial-gradient(farthest-side at top left, #0000 94%, currentColor 96%),
+  radial-gradient(farthest-side at top right, #0000 94%, currentColor 96%),
+  radial-gradient(farthest-side at bottom right, #0000 94%, currentColor 96%),
+  radial-gradient(farthest-side at bottom left, #0000 94%, currentColor 96%);
+  animation: l40-2 1s infinite;
+}
+
+@keyframes l40-1 {
+  0%, 10%, 90%, 100% {
+    inset: 0
+  }
+  40%, 60% {
+    inset: -10px
+  }
+}
+
+@keyframes l40-2 {
+  0%, 40% {
+    transform: rotate(0)
+  }
+  60%, 100% {
+    transform: rotate(90deg)
+  }
+}

src/static/style/main.scss

@@ -25,12 +25,13 @@ main .MuiLinearProgress-root {
   border-radius: 4px;
 }
 
-.preloader_bg {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
+html, body, #root,.App {
   height: 100%;
-  background: #000000ba;
-  z-index: 2;
 }
+
+.App {
+ display: flex;
+ flex-direction: column;
+}
+
+footer { margin-top: auto }