diff --git a/script.js b/script.js
index ba3d0b68..2cd7df86 100644
--- a/script.js
+++ b/script.js
@@ -8,7 +8,19 @@ function toggleMenu() {
menuList.style.maxHeight = "0px";
}
}
-
+ window.onscroll = function() {
+ updateProgressBar();
+ };
+
+
+ function updateProgressBar() {
+ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+ var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+ var scrollPercent = (scrollTop / scrollHeight) * 100;
+
+ document.getElementById("progressBar").style.width = scrollPercent + "%";
+ }
+
document.addEventListener('DOMContentLoaded', () => {
console.log("Website loaded successfully!");
});
@@ -53,3 +65,5 @@ window.onload = () => {
themeToggle.checked = true;
}
};
+
+
diff --git a/style.css b/style.css
index 15340ece..0f7985f2 100644
--- a/style.css
+++ b/style.css
@@ -87,6 +87,22 @@ button[type="submit"]:hover {
font-family: sans-serif;
}
+#progressBarContainer {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 7px;
+ background-color: whitesmoke;
+ z-index: 9999;
+ }
+
+ #progressBar {
+ height: 100%;
+ width: 0%;
+ background: linear-gradient(to right, #fb5283, #ff3527);;
+ transition: width 0.2s ease;
+ }
*.dark-mode{
background-color: #493d3d;
color:#f1f1f1;