Progress bar

faisalnjs · faisalnjs · commit 6cf09f8c5838 · 2025-08-28T21:22:01.000-04:00
diff --git a/frontend/pages/head.ejs b/frontend/pages/head.ejs
@@ -25,4 +25,5 @@
 
 <body>
 	<main>
+		<div class="progress"></div>
 		<div class="inner">
diff --git a/frontend/public/scripts.js b/frontend/public/scripts.js
@@ -60,6 +60,7 @@ function next() {
         document.querySelector(`.inputField[step="${step}"]`)?.classList.remove('active');
         step++;
         document.querySelector(`.inputField[step="${step}"]`)?.classList.add('active');
+        progress((step / document.querySelectorAll('.inputField').length) * 100);
     } else {
         document.getElementById('next')?.classList.add('hidden');
         document.getElementById('create')?.classList.remove('hidden');
@@ -80,6 +81,7 @@ function back() {
         document.querySelector(`.inputField[step="${step}"]`)?.classList.remove('active');
         step--;
         document.querySelector(`.inputField[step="${step}"]`)?.classList.add('active');
+        progress((step / document.querySelectorAll('.inputField').length) * 100);
     } else {
         document.getElementById('back')?.classList.add('hidden');
     };
@@ -146,6 +148,7 @@ function create() {
     localStorage.clear();
 };
 
-// progress bar
-// radio input
-// select input
+function progress(percent) {
+    const progressBar = document.querySelector('.progress');
+    progressBar.style.width = percent + '%';
+};
diff --git a/frontend/public/styles.css b/frontend/public/styles.css
@@ -210,6 +210,17 @@ main {
 		transition: 0.25s;
 	}
 
+	> .progress {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 5px;
+		width: 0%;
+		background: #ffffff;
+		border-radius: 15px;
+		transition: width 0.25s;
+	}
+
 	.inner {
 		display: flex;
 		flex-direction: column;
