Update loading animation

SeeChen · Dec 1, 2024 · a3a0288 · a3a0288
1 parent a9e1665
commit a3a0288
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 1 deletion.
diff --git a/CascadingStyleSheets/General/loadingAnimation.css b/CascadingStyleSheets/General/loadingAnimation.css
@@ -0,0 +1,61 @@
+
+#box_LoadingAnimation {
+
+    position: fixed;
+
+    top: 0;
+    left: 0;
+
+    width: 100vw;
+    height: 100vh;
+
+    z-index: 20001;
+
+    background: rgba(0, 0, 0, 0.5);
+
+    display: none;
+}
+
+#box_LoadingAnimation.waitToDisplay {
+
+    display: block;
+    opacity: 0;
+
+    transition: all 0.5s;
+}
+
+#box_LoadingAnimation.display {
+
+    display: block;
+    opacity: 1;
+
+    transition: all 0.5s;
+}
+
+@keyframes loadingAnimation {
+
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+
+        transform: rotate(360deg);
+    }
+}
+
+#box_LoadingAnimation img {
+
+    position: absolute;
+
+    height: 15%;
+
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    margin: auto;
+
+    animation: loadingAnimation 3s infinite linear;
+}
diff --git a/File/Image/loading.png b/File/Image/loading.png
diff --git a/JavaScript/Projects/projects.js b/JavaScript/Projects/projects.js
@@ -259,6 +259,10 @@ const SeeChen_ProjectsMouseEvent = {
 
             // await window.router.route(`/projects/${e.target.dataset.id}/`, false);
 
+            document.querySelector("#box_LoadingAnimation").classList.add("waitToDisplay");
+            await new Promise(r => setTimeout(r, 100));
+            document.querySelector("#box_LoadingAnimation").classList.add("display");
+
             var oldProjectDetails = window.myTools.deepCopy(window.myData.projects.currentDetails);
 
             window.myData.projects.currentDetails.children[0].children[1].lang = "projectName";
@@ -392,6 +396,10 @@ const SeeChen_ProjectsMouseEvent = {
             setTimeout(() => {
                 document.querySelector("#project_details").classList.add("full-window");
             }, 100);
+
+            document.querySelector("#box_LoadingAnimation").classList.remove("display");
+            await new Promise(r => setTimeout(r, 600));
+            document.querySelector("#box_LoadingAnimation").classList.remove("waitToDisplay");
         }
     }
 }

diff --git a/spa.html b/spa.html
@@ -38,6 +38,7 @@
         <link rel="stylesheet" href="/CascadingStyleSheets/General/navigation.css" type="text/css">
 
         <link rel="stylesheet" href="/CascadingStyleSheets/General/loading.css" type="text/css">
+        <link rel="stylesheet" href="/CascadingStyleSheets/General/loadingAnimation.css" type="text/css">
 
         <link rel="stylesheet" href="/CascadingStyleSheets/General/footer.css" type="text/css">
 
@@ -70,6 +71,9 @@
 
     <body>
 
+        <div id="box_LoadingAnimation">
+            <img src="/File/Image/loading.png" alt="">
+        </div>
         <!-- Loading Pages -->
         <div id="box_loading"></div>
 
@@ -95,7 +99,6 @@
 
         <!-- Footer Area -->
         <div id="box_footerArea" class="notInDisplay"></div>
-
         </div>
     </body>
 </html>