Merge pull request #1417 from RadhikaMalpani1702/main

Added The Scroll Down Progress Bar in Home Page
khushi-joshi-05 · Jul 21, 2024 · 8d1a413 · 8d1a413
2 parents 90e2f19 + 4c5b63c
commit 8d1a413
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/Html-files/menu.html b/Html-files/menu.html
@@ -38,9 +38,31 @@
     <link rel="stylesheet" href="../Css-files/navbar.css" />
     <link rel="stylesheet" href="../Css-files/footer.css" />
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+    <style>
+       #progressBar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0%;
+            height: 8px;
+            background-color: #e21f1f;
+            z-index: 9999;
+        }
+    </style>
   </head>
 
   <body>
+        <!-- Progress bar -->
+        <div id="progressBar"></div>
+        <script>
+            window.onscroll = function () {
+                var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+                var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+                var scrolled = (winScroll / height) * 100;
+                document.getElementById("progressBar").style.width = scrolled + "%";
+            };
+        </script>
+        <!-- end -->
 <nav class="navbar navbar-expand-lg fixed-top">
     <div class="container-fluid">
         <a href="index.html" class="navbar-brand opacity-75 flex-fill">

diff --git a/index.html b/index.html
@@ -43,10 +43,30 @@
             text-shadow: #FC0 1px 0 6px;
             text-decoration: none;
         }
+        #progressBar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0%;
+            height: 8px;
+            background-color: #e21f1f;
+            z-index: 9999;
+        }
     </style>
 </head>
 
 <body>
+    <!-- Progress bar -->
+    <div id="progressBar"></div>
+    <script>
+        window.onscroll = function () {
+            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+            var scrolled = (winScroll / height) * 100;
+            document.getElementById("progressBar").style.width = scrolled + "%";
+        };
+    </script>
+    <!-- end -->
     <div id="loader-wrapper">
         <div id="loader"></div>
         <div class="loader-section section-left"></div>