From 800a3656455f20efbda3056184ac97c7e8eb1098 Mon Sep 17 00:00:00 2001
From: vishal-pandey <contact@vishalpandey.co.in>
Date: Sun, 28 Apr 2024 01:21:20 +0530
Subject: [PATCH] Loading Screen Added

---
 app.js     |  2 ++
 index.html |  4 +++
 style.css  | 97 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 102 insertions(+), 1 deletion(-)
diff --git a/app.js b/app.js
index 697b338..f91413a 100644
--- 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
index ee15827..34641af 100644
--- 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
index 15f8d54..ab2bffc 100644
--- a/style.css
+++ b/style.css
@@ -68,4 +68,99 @@ body{
     padding: 10px 15px;
     width: 100%;
     border: 1px solid lightgrey;
-}
\ No newline at end of file
+}
+
+.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); */
+    }
+}
