From f8a232bb07c25d72645fe6a1a2e020cc8cd0012f Mon Sep 17 00:00:00 2001
From: Tejashri Taral <160386036+Tejashri-Taral@users.noreply.github.com>
Date: Mon, 26 Aug 2024 21:12:39 +0530
Subject: [PATCH] Update index.html

---
 Website/index.html | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
diff --git a/Website/index.html b/Website/index.html
index ef442b3e3..729f0561b 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -8,8 +8,42 @@
     <link rel="icon" href="/assets/recode-hive.png" type="image/png"> <!-- Added favicon -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+    #progress-container {
+    position: fixed ;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    z-index: 99990;
+    /* background: #f3f3f3; */
+}
+
+#progress-bar {
+    height: 53%;
+    width: 0;
+    background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(58, 114, 227) 50%, rgb(22, 121, 250) 100%);
+    box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
+    transition: width 0.09s ease-in-out;
+    border-radius: 10px;
+}
+
+    </style>
 </head>
 <body class="dark-mode">
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+
+      <script>
+            
+        window.addEventListener('scroll', function() {
+            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            const scrolled = (winScroll / height) * 100;
+            document.getElementById('progress-bar').style.width = scrolled + '%';
+        });
+        </script>
     <div class="loading-container" id="loading-animation">
         <div class="loader"></div>
     </div>
