Added "Scroll Down Progress Bar" To The website (#666)

* Added Progress bar
Anishkagupta04 · Jul 5, 2024 · 0e70c48 · 0e70c48
1 parent 4592b3b
commit 0e70c48
Show file tree

Hide file tree

Showing 5 changed files with 1,322 additions and 1,144 deletions.
diff --git a/Html-Files/news.html b/Html-Files/news.html
@@ -400,6 +400,16 @@
   }
 }
 
+#progressBar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 0%;
+      height: 6px;
+      background-color: #3fbcc0;
+      z-index: 9999;
+    }
+
     </style>
     <link rel="stylesheet" href="chatbox.css">
      <!-- Google Fonts Link For Icons chatboxx -->
@@ -411,6 +421,15 @@
 </head>
 
 <body>
+  <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>
   <div class="pre">
     <div class="loader"></div>
   </div>

diff --git a/dex.html b/dex.html
@@ -12,8 +12,28 @@
         <link rel="stylesheet" href="assets/css/styles.css">
 
         <title>RAPIDOC|Delivery</title>
+        <style>
+    #progressBar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 0%;
+      height: 6px;
+      background-color: #3fbcc0;
+      z-index: 9999;
+    }
+        </style>
     </head>
     <body>
+        <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>
         <!--=============== HEADER ===============-->
         <header class="header" id="header">
             <nav class="nav container">

diff --git a/faq.html b/faq.html
@@ -107,8 +107,29 @@
     text-align: center;
     font-size: xx-large;
   }
+  #progressBar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 0%;
+      height: 6px;
+      background-color: #3fbcc0;
+      z-index: 9999;
+    }
+
 </style>
 <body>
+
+  <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>
+
     <!-- Header -->
 
     <header class="header_container">