Loading Screen Added

vishal-pandey · Apr 27, 2024 · 800a365 · 800a365
1 parent 6ce99fa
commit 800a365
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 1 deletion.
diff --git a/app.js b/app.js
@@ -13,6 +13,8 @@ window.onload = async function () {
 
     fillBoard(weights, bias);
 
+    document.querySelector(".loading").style.display = "none";
+
     document.querySelector(".reset").addEventListener("click", function () {
         data = Array.from({ length: 784 }, () => 0);
         document.querySelector(".output").innerHTML = "";

diff --git a/index.html b/index.html
@@ -10,6 +10,10 @@
 </head>
 <body>
 
+    <section class="loading">
+        <div class="loading-icon"></div>
+        <div class="loading-info">Please wait downloading weights....</div>
+    </section>
     <section class="container">
         <section class="header">
             <h1>Deep Neural Network in pure JS <a href="https://github.com/vishal-pandey/deep-neural-network-javascript"><svg height="20" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle color-fg-default">

diff --git a/style.css b/style.css
@@ -68,4 +68,99 @@ body{
     padding: 10px 15px;
     width: 100%;
     border: 1px solid lightgrey;
-}
+}
+
+.loading{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    font-size: 20px;
+    color: grey;
+}
+
+.loading-icon{
+    box-sizing: border-box;
+    width: 100px;
+    height: 100px;
+    border: 10px solid grey;
+    border-radius: 50%;
+    margin-bottom: 50px;
+    position: relative;
+    padding: 0;
+    animation: spin 1s linear infinite;
+}
+
+.loading-icon::before{
+    box-sizing: border-box;
+    content: '';
+    position: absolute;
+    transform-origin: 50% 50%;
+    /* left: -10px; */
+    /* top: -10px; */
+    width: 100px;
+    height: 100px;
+    border: 10px solid rgb(91, 91, 91);
+    border-radius: 50%;
+    margin: 0;
+    padding: 0;
+    animation: spin 1s linear infinite;
+}
+
+.loading-icon::after{
+    box-sizing: border-box;
+    content: '';
+    position: absolute;
+    transform-origin: 50% 50%;
+    /* left: -10px; */
+    /* top: -10px; */
+    width: 100px;
+    height: 100px;
+    border: 10px solid rgb(80, 80, 80);
+    border-radius: 50%;
+    margin: 0;
+    padding: 0;
+    animation: spin1 1s linear infinite;
+}
+
+
+@keyframes spin {
+    0% {
+        left: 0px;
+        top: 0px;
+        /* transform: rotate(0deg); */
+    }
+    50% {
+        left: -20px;
+        top: -20px;
+        /* transform: rotate(360deg); */
+    }
+    100% {
+        left: 0px;
+        top: 0px;
+        /* transform: rotate(0deg); */
+    }
+}
+
+
+@keyframes spin1 {
+    0% {
+        left: 0px;
+        top: 0px;
+        /* transform: rotate(0deg); */
+    }
+    50% {
+        left: 10px;
+        top: 10px;
+        /* transform: rotate(360deg); */
+    }
+    100% {
+        left: 0px;
+        top: 0px;
+        /* transform: rotate(0deg); */
+    }
+}