Improve progress bar UI

assets/css/index.css

@@ -361,10 +361,27 @@ img {
 .itemProgress {
 	font-weight: bold;
 	cursor: pointer;
+	padding: 10px 0;
 }
-.progressBar {
-	width: 90%;
+
+.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;
 }
@@ -1138,38 +1155,39 @@ input[type="range"]::-webkit-slider-thumb:hover {
 }
 
 #updatePopup {
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    z-index: 9999;
-    background-color: var(--box-separation);
-    padding: 15px 20px;
-    border-radius: 10px;
+	position: fixed;
+	bottom: 30px;
+	right: 30px;
+	z-index: 9999;
+	background-color: var(--box-separation);
+	padding: 15px 20px;
+	border-radius: 10px;
 	display: none;
 
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
 }
 
 .progress-track {
-    width: 200px;
-    height: 8px;
-    background-color: rgba(209, 209, 209, 0.446);
-    border-radius: 4px;
-    overflow: hidden;
+	width: 200px;
+	height: 8px;
+	background-color: rgba(209, 209, 209, 0.446);
+	border-radius: 4px;
+	overflow: hidden;
 	margin: 10px 2px;
 }
 
 #progressBarFill {
-    height: 100%;
-    width: 0%;
-    background-color: var(--greenBtn);
-    transition: width 0.2s ease;
+	height: 100%;
+	width: 0%;
+	background-color: var(--greenBtn);
+	transition: width 0.2s ease;
 }
 
-.update-label, #updateProgress {
-    font-size: 14px;
+.update-label,
+#updateProgress {
+	font-size: 14px;
 }

src/renderer.js

@@ -1450,17 +1450,36 @@ 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 {
-			speedEl.textContent = `${i18n.__("speed")}: ${
-				progress.currentSpeed || "0 B/s"
-			}`;
-			progEl.innerHTML = `<progress class="progressBar" value="${progress.percent}" max="100"></progress>`;
-			ipcRenderer.send("progress", progress.percent / 100);
+
+			return;
 		}
+
+		speedEl.textContent = `${i18n.__("speed")}: ${
+			progress.currentSpeed || "0 B/s"
+		}`;
+		fillEl.style.width = progress.percent + "%";
+
+		ipcRenderer.send("progress", progress.percent / 100);
 	}
 
 	/**