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

Anishkagupta04 · Jul 10, 2024 · 3c0cb6e · 3c0cb6e
1 parent bca670d
commit 3c0cb6e
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 2 deletions.
diff --git a/Html-Files/appointment.html b/Html-Files/appointment.html
@@ -5,8 +5,27 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Book an Appointment</title>
     <link rel="stylesheet" href="./Css-Files/appointStyle.css">
+    <style>#progressBar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 8px;
+        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>
         <div class="logo">Doctor's Clinic</div>
     </header>

diff --git a/Html-Files/customer_agreement.html b/Html-Files/customer_agreement.html
@@ -92,11 +92,29 @@
             color: black;
         }
     </style>
+<style>#progressBar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0%;
+    height: 8px;
+    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>
 
     <div class="container" id="customer-agreement-container">
         <header id="customer-agreement-header">

diff --git a/Html-Files/derma.html b/Html-Files/derma.html
@@ -25,11 +25,30 @@
             background-color: #02969bd5;
         }
     </style>
+     <style>#progressBar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 8px;
+        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>
+
 
     <button class="button home-button" onclick="window.location.href='../index.html#patient-portal'">Rapidoc</button>
 

diff --git a/Html-Files/news.html b/Html-Files/news.html
@@ -418,9 +418,20 @@
      <link rel="stylesheet" href="./Css-Files/aboutus.css" />
      <link rel="stylesheet" href="./Css-Files/testimonial.css" />
      <script src="chatboxx.js" defer></script>
+     <style>#progressBar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 0%;
+      height: 8px;
+      background-color: #3fbcc0;
+      z-index: 9999;
+
+    }</style>
 </head>
 
 <body>
+
   <div id="progressBar"></div>
   <script>
     window.onscroll = function () {

diff --git a/Html-Files/privacy_policy_page.html b/Html-Files/privacy_policy_page.html
@@ -712,9 +712,28 @@
     <link rel="stylesheet" href="./Css-Files/aboutus.css" />
     <link rel="stylesheet" href="./Css-Files/testimonial.css" />
     <script src="chatboxx.js" defer></script>
+    <style>#progressBar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 0%;
+      height: 8px;
+      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_container nav-h">
         <div class="img">

diff --git a/Html-Files/terms_and_conditions.html b/Html-Files/terms_and_conditions.html
@@ -83,9 +83,30 @@
             color: black;
         }
     </style>
+     <style>#progressBar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 8px;
+        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>
+
     <div class="container" id="terms-conditions-container">
         <header class="header" id="terms-conditions-header">
             <h1 class="title" id="terms-conditions-title">Terms and Conditions</h1>

diff --git a/test.html b/test.html
@@ -28,9 +28,27 @@
         integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-
+        <style>#progressBar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 0%;
+            height: 8px;
+            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 class="header_container">
         <div class="img">
         <img id="rd-logo"  style="width: 90px; height: auto;" src="/images/rd.png">