Merge pull request #1097 from MastanSayyad/main

Fix and Added the "Scroll Down Progress Bar"
apu52 · Jul 25, 2024 · 1d12fbd · 1d12fbd
2 parents e006af5 + bb194d7
commit 1d12fbd
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 14 deletions.
diff --git a/about.html b/about.html
@@ -68,10 +68,31 @@
     }
 
     @media (max-width: 740px) {
-    .circle-container{
-      display: none;
+      .circle-container {
+        display: none;
+      }
+    }
+
+    .progress-bar {
+      height: 7px;
+      width: 0;
+      background-color: #f523f5;
+      opacity: 0.8;
+      transition: transform 0.1s, left 0.1s, top 0.1s;
+      box-shadow: 0 0 20px #23bdf5,
+        0 0 60px #f523f5,
+        0 0 100px #23bdf5;
+    }
+
+    @keyframes colors {
+      0% {
+        filter: hue-rotate(0deg);
+      }
+
+      100% {
+        filter: hue-rotate(360deg);
+      }
     }
-  }
   </style>
 </head>
 <!-- Light-Dark theme SWITCH -->
@@ -81,6 +102,13 @@
 
 
 <body>
+  <!-- Scroll down progress bar -->
+
+  <div class="nav-wrapper">
+    <div class="progress-bar"></div>
+  </div>
+
+  <script src="scrolldownprogressbar.js"></script>
   <div class="circle-container">
     <div class="circle"></div>
     <div class="circle"></div>
@@ -196,7 +224,7 @@
           <!-- <span aria-hidden=""></span> -->
           <!-- <span aria-hidden="" class="btn__glitch">CONTACT</span> -->
           <label class="number"></label>
-        </div> 
+        </div>
       </div>
     </div>
     <main>

diff --git a/contact.html b/contact.html
@@ -154,6 +154,12 @@
     });
 </script>
 
+<div class="nav-wrapper">
+  <div class="progress-bar"></div>
+</div>
+
+<script src="scrolldownprogressbar.js"></script>
+
   <div class="main">
     <div class="container">
       <div class="radio-wrapper">

diff --git a/contributor.html b/contributor.html
@@ -54,6 +54,12 @@
 </label>
 
 <body>
+  <div class="nav-wrapper">
+    <div class="progress-bar"></div>
+  </div>
+
+  <script src="scrolldownprogressbar.js"></script>
+
   <div class="cursor"></div>
 
   <div class="main">

diff --git a/scrolldownprogressbar.js b/scrolldownprogressbar.js
@@ -1,7 +1,15 @@
-let progressBar = document.querySelector(".progress-bar");
-let documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+document.addEventListener("DOMContentLoaded", function () {
+   let progressBar = document.querySelector(".progress-bar");
 
-window.onscroll = function(){
-   let progress = (scrollY / documentHeight) * 100;
-   progressBar.style.width = progress + "%";
-}
+   function updateProgressBar() {
+     let documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+     let scrollTop = window.scrollY || document.documentElement.scrollTop;
+     let progress = (scrollTop / documentHeight) * 100;
+     progressBar.style.width = progress + "%";
+   }
+
+   window.addEventListener("scroll", updateProgressBar);
+   window.addEventListener("resize", updateProgressBar); // To handle changes in document height due to resizing
+   updateProgressBar(); // Initial call to set the progress bar on page load
+ });
+
diff --git a/style.css b/style.css
@@ -29,16 +29,30 @@
     top: 0px;
     left: 0;
     width: 100%;
-    height: 5px;
+    height: px;
     /* background-color: black; */
     z-index: 999;
   }
   .progress-bar{
-    height: 5px;
+    height: 7px;
     width: 0;
-    background-color: rgb(179, 76, 252);
-
+    background-color: #f523f5;
+    opacity: 0.8;
+    transition: transform 0.1s, left 0.1s, top 0.1s;
+    box-shadow: 0 0 20px #23bdf5,
+      0 0 60px #f523f5,
+      0 0 100px #23bdf5;
   }
+
+  @keyframes colors {
+    0% {
+        filter: hue-rotate(0deg);
+    }
+
+    100% {
+        filter: hue-rotate(360deg);
+    }
+}
 
   .btn {
     /* --primary: #ff184c;