Create progress bar

public/assets/scripts/main.js

@@ -5,22 +5,32 @@ async function compress() {
 	const filesizeUnit = document.getElementById("filesize-unit").value;
 	const file = document.getElementById("file-input").files[0];
 
+	updateProgress(0);
+
 	const ffmpeg = new FFmpegWASM.FFmpeg();
 	ffmpeg.on("progress", data => {
-		console.log(data.progress);
+		console.log(data);
+		updateProgress(data.progress);
 	});
 
 	await ffmpeg.load({ coreURL: "/assets/scripts/core/package/dist/umd/ffmpeg-core.js" });
 
 	await ffmpeg.writeFile(file.name, await readFromBlob(file));
 
-	await ffmpeg.exec(["-i", file.name, "-preset", "ultrafast", "-fs", filesize + filesizeUnit, "compressed.mp4"]);
+	await ffmpeg.exec(["-i", file.name, "-preset", "veryfast", "-fs", filesize + filesizeUnit, "compressed.mp4"]);
 
 	const video = await ffmpeg.readFile("compressed.mp4");
 
 	location.href = URL.createObjectURL(new Blob([video.buffer], { type: "video/mp4" }));
 }
 
+function updateProgress(progress) {
+	const percent = (progress * 100).toFixed(1) + "%";
+
+	document.getElementById("progress-percentage").innerText = percent;
+	document.getElementById("progress-indicator").style.clipPath = `rect(0 ${percent} 100% 0)`;
+}
+
 function openFileSelector() {
 	document.getElementById("file-input").click();
 }

public/assets/style/main.css

@@ -152,10 +152,36 @@ input:focus, select:focus {
 	color: #757575;
 	font-size: 3rem;
 	font-weight: bold;
-	margin-top: 2rem;
+	margin-top: 4rem;
+	margin-bottom: 0;
 }
 
 #loading-description {
 	font-size: 1rem;
 }
 
+#progress-container {
+	width: 80vw;
+	height: 2rem;
+	max-width: 500px;
+	border-radius: 2rem;
+	margin: auto;
+	background-color: #E0E0E0;
+	position: relative;
+	margin-top: 3rem;
+}
+
+#progress-indicator {
+	position: absolute;
+	inset: 0;
+	background-image: linear-gradient(to right, #4CAF50, #00BCD4);
+	border-radius: 2rem;
+	transition: clip-path 200ms;
+}
+
+#progress-percentage {
+	color: #757575;
+	font-weight: bold;
+	font-size: 1.2rem;
+}
+

public/index.html

@@ -38,6 +38,12 @@
 		<section id="loading-section" style="opacity: 0; display: none;">
 			<h3 id="loading-title">Please wait...</h3>
 			<p id="loading-description">This may take a while</p>
+
+			<div id="progress-container">
+				<div id="progress-indicator"></div>
+			</div>
+
+			<p id="progress-percentage">0%</p>
 		</section>
 	</body>
 </html>