Improve progress bar UI

assets/css/index.css

@@ -361,10 +361,27 @@ img {
 .itemProgress {
 	font-weight: bold;
 	cursor: pointer;
+	padding: 10px 0;
 }
-.progressBar {
+
+.custom-progress {
     width: 90%;
+    height: 8px;
+    background: #e0e0e0;
+    border-radius: 6px;
+    overflow: hidden;
+	display:inline-block;
+}
+
+.custom-progress-fill {
+    width: 0%;
+    height: 100%;
+    background: var(--blueBtn);
+    transition: width 0.3s ease;
+    border-radius: 6px 0 0 6px;
 }
+
+
 .itemSpeed {
 	padding: 10px 5px 5px 5px;
 }
@@ -1151,7 +1168,7 @@ input[type="range"]::-webkit-slider-thumb:hover {
 	align-items: center;
 	justify-content: center;
 	gap: 8px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
 
 .progress-track {
@@ -1170,6 +1187,7 @@ input[type="range"]::-webkit-slider-thumb:hover {
 	transition: width 0.2s ease;
 }
 
-.update-label, #updateProgress {
+.update-label,
+#updateProgress {
 	font-size: 14px;
 }

src/renderer.js

@@ -1450,18 +1450,37 @@ class YtDownloaderApp {
 		const progEl = $(`${randomId}_prog`);
 		if (!speedEl || !progEl) return;
 
+		let fillEl = progEl.querySelector(".custom-progress-fill");
+
+		if (!fillEl) {
+			progEl.innerHTML = "";
+
+			const bar = document.createElement("div");
+			bar.className = "custom-progress";
+
+			fillEl = document.createElement("div");
+			fillEl.className = "custom-progress-fill";
+
+			bar.appendChild(fillEl);
+			progEl.appendChild(bar);
+		}
+
 		if (progress.percent === 100) {
+			fillEl.style.width = progress.percent + "%";
 			speedEl.textContent = "";
 			progEl.textContent = i18n.__("processing");
 			ipcRenderer.send("progress", 0);
-		} else {
+
+			return;
+		}
+
 		speedEl.textContent = `${i18n.__("speed")}: ${
 			progress.currentSpeed || "0 B/s"
 		}`;
-			progEl.innerHTML = `<progress class="progressBar" value="${progress.percent}" max="100"></progress>`;
+		fillEl.style.width = progress.percent + "%";
+
 		ipcRenderer.send("progress", progress.percent / 100);
 	}
-	}
 
 	/**
 	 * Updates a download item's UI to show it has completed successfully.