Merge pull request #142 from RadhikaMalpani1702/main

Added Progress Bar for the Website Visual-Sort
MastanSayyad · Oct 13, 2024 · d39f067 · d39f067
2 parents 37405c9 + 4095304
commit d39f067
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 0 deletions.
diff --git a/Terms.html b/Terms.html
@@ -61,12 +61,54 @@
         .hover-move:hover {
             transform: translateX(20px);
         }
+        #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: #f3f3f3; 
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            /* width: 0%; */
+            height: 100%;
+            background-color: rgb(219, 127, 219);
+        }
     </style>
 
 </head>
 
 <body>
 
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+
+      <script>
+    let lastScrollPercentage = 0; // Keep track of the last scroll percentage
+
+    function updateProgressBar() {
+        const scrollTop = window.scrollY; // Current scroll position
+        const windowHeight = document.documentElement.scrollHeight - window.innerHeight; // Total scrollable height
+        const scrollPercentage = (scrollTop / windowHeight) * 100; // Calculate scroll percentage
+
+        // Smoothly transition to the new percentage
+        const progressBar = document.getElementById('progress-bar');
+
+        // Use a linear interpolation to gradually move towards the new percentage
+        lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; // Adjust the smoothing factor here
+        progressBar.style.width = lastScrollPercentage + '%'; // Update the progress bar width
+    }
+
+    // Listen for the scroll event
+    window.addEventListener('scroll', updateProgressBar);
+
+      </script>
+
     <body data-spy="scroll" data-target=".site-navbar-target" data-offset="72">
 
         <div id="Loader"></div>

diff --git a/index.html b/index.html
@@ -172,11 +172,56 @@
         .delay-100 { animation-delay: 0.1s; }
         .delay-200 { animation-delay: 0.2s; }
         .delay-300 { animation-delay: 0.3s; }
+
+        #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: #f3f3f3; 
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            /* width: 0%; */
+            height: 100%;
+            background-color: rgb(219, 127, 219);
+        }
+
     </style>
 </head>
 
 <body data-spy="scroll" data-target=".site-navbar-target" data-offset="72">
 
+  <div id="progress-container">
+    <div id="progress-bar"></div>
+  </div>
+
+  <script>
+let lastScrollPercentage = 0; // Keep track of the last scroll percentage
+
+function updateProgressBar() {
+    const scrollTop = window.scrollY; // Current scroll position
+    const windowHeight = document.documentElement.scrollHeight - window.innerHeight; // Total scrollable height
+    const scrollPercentage = (scrollTop / windowHeight) * 100; // Calculate scroll percentage
+
+    // Smoothly transition to the new percentage
+    const progressBar = document.getElementById('progress-bar');
+
+    // Use a linear interpolation to gradually move towards the new percentage
+    lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; // Adjust the smoothing factor here
+    progressBar.style.width = lastScrollPercentage + '%'; // Update the progress bar width
+}
+
+// Listen for the scroll event
+window.addEventListener('scroll', updateProgressBar);
+
+  </script>
+
+
   <div id="Loader"></div>
 
   <div class="site-wrap">

diff --git a/licensing.html b/licensing.html
@@ -58,6 +58,24 @@
         .hover-move:hover {
             transform: translateX(20px);
         }
+
+        #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: #f3f3f3; 
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            /* width: 0%; */
+            height: 100%;
+            background-color: rgb(219, 127, 219);
+        }
     </style>
     <style>
         body{
@@ -68,6 +86,31 @@
 </head>
 <body>
 
+  <div id="progress-container">
+    <div id="progress-bar"></div>
+  </div>
+
+  <script>
+let lastScrollPercentage = 0; // Keep track of the last scroll percentage
+
+function updateProgressBar() {
+    const scrollTop = window.scrollY; // Current scroll position
+    const windowHeight = document.documentElement.scrollHeight - window.innerHeight; // Total scrollable height
+    const scrollPercentage = (scrollTop / windowHeight) * 100; // Calculate scroll percentage
+
+    // Smoothly transition to the new percentage
+    const progressBar = document.getElementById('progress-bar');
+
+    // Use a linear interpolation to gradually move towards the new percentage
+    lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; // Adjust the smoothing factor here
+    progressBar.style.width = lastScrollPercentage + '%'; // Update the progress bar width
+}
+
+// Listen for the scroll event
+window.addEventListener('scroll', updateProgressBar);
+
+  </script>
+
     <body data-spy="scroll" data-target=".site-navbar-target" data-offset="72">
 
         <div id="Loader"></div>

diff --git a/privacy-policy.html b/privacy-policy.html
@@ -113,10 +113,54 @@
                 margin-bottom: 0;
             }
         }
+
+        #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: #f3f3f3; 
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            /* width: 0%; */
+            height: 100%;
+            background-color: rgb(219, 127, 219);
+        }
     </style>
 </head>
 
 <body>
+
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+
+      <script>
+    let lastScrollPercentage = 0; // Keep track of the last scroll percentage
+
+    function updateProgressBar() {
+        const scrollTop = window.scrollY; // Current scroll position
+        const windowHeight = document.documentElement.scrollHeight - window.innerHeight; // Total scrollable height
+        const scrollPercentage = (scrollTop / windowHeight) * 100; // Calculate scroll percentage
+
+        // Smoothly transition to the new percentage
+        const progressBar = document.getElementById('progress-bar');
+
+        // Use a linear interpolation to gradually move towards the new percentage
+        lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; // Adjust the smoothing factor here
+        progressBar.style.width = lastScrollPercentage + '%'; // Update the progress bar width
+    }
+
+    // Listen for the scroll event
+    window.addEventListener('scroll', updateProgressBar);
+
+      </script>
+
     <nav class="navbar navbar-expand-lg fixed-top" style="background-color: #303842;">
         <div class="container-fluid">
             <a class="navbar-brand" style="font-weight: 900; color: rgb(255, 255, 255);" href="index.html">Visual

diff --git a/visual.html b/visual.html
@@ -298,9 +298,52 @@
                 overflow-y: auto;
             }
         }
+        #progress-container {
+            width: 100%;
+            height: 5px;
+            background-color: #f3f3f3; 
+            border-radius: 5px;
+            overflow: hidden; 
+            position: fixed;
+            top: 0;
+            left: 0; 
+            z-index: 9999; 
+        }
+
+        #progress-bar {
+            /* width: 0%; */
+            height: 100%;
+            background-color: rgb(219, 127, 219);
+        }
     </style>
 </head>
 <body>
+
+    <div id="progress-container">
+        <div id="progress-bar"></div>
+      </div>
+
+      <script>
+    let lastScrollPercentage = 0; // Keep track of the last scroll percentage
+
+    function updateProgressBar() {
+        const scrollTop = window.scrollY; // Current scroll position
+        const windowHeight = document.documentElement.scrollHeight - window.innerHeight; // Total scrollable height
+        const scrollPercentage = (scrollTop / windowHeight) * 100; // Calculate scroll percentage
+
+        // Smoothly transition to the new percentage
+        const progressBar = document.getElementById('progress-bar');
+
+        // Use a linear interpolation to gradually move towards the new percentage
+        lastScrollPercentage += (scrollPercentage - lastScrollPercentage) * 0.1; // Adjust the smoothing factor here
+        progressBar.style.width = lastScrollPercentage + '%'; // Update the progress bar width
+    }
+
+    // Listen for the scroll event
+    window.addEventListener('scroll', updateProgressBar);
+
+      </script>
+
     <div id="Loader"></div>
     <div class="header">
         <h1 id="heading">Sorting Algorithms Visualization</h1>