download bar working

FCLauncher/src/index.html

@@ -17,6 +17,9 @@
     <div class="Logo">
       <img src="assets/Title.png" alt="Title" id="Title">
     </div>
+    <div class="progress">
+      <div class="progressFinished"></div>
+    </div>
 
 
     <div class="container" data-bs-theme="dark">

FCLauncher/src/main.js

@@ -1,11 +1,16 @@
 const { invoke } = window.__TAURI__.tauri;
 const { listen } = window.__TAURI__.event;
 const { ask } = window.__TAURI__.dialog;
+const downBar = document.querySelector(".progressFinished");
 //import { listen } from '@tauri-apps/api';
 
 let greetInputEl;
 let greetMsgEl;
 
+function progressBar() {
+  
+  
+}
 
 const download_progress = listen("download_progress", (progress) => {
   console.log("Downloading");
@@ -15,6 +20,8 @@ const download_progress = listen("download_progress", (progress) => {
   document.getElementById("download_name").textContent = "Downloading "+progress.payload.download_name;
   document.getElementById("download_progress").textContent = downProgress + "MB / "+downTotal+"MB";
   document.getElementById("launchGame").disabled = true;
+  downBar.style.width = `${(progress.payload.downloaded / progress.payload.total) * 100}%`;
+  document.querySelector(".progress").style.visibility = "visible";
 });
 
 const download_finished = listen("download_finished", (event) => {
@@ -22,6 +29,8 @@ const download_finished = listen("download_finished", (event) => {
   document.getElementById("download_progress").textContent = "";
   document.getElementById("launchGame").disabled = false;
   document.getElementById("launchGame").textContent ="Launch Minecraft";
+  downBar.style.width = 0;
+  document.querySelector(".progress").style.visibility = "hidden";
 });
 
 const update_dialog = listen("update_dialog", (event) => {
@@ -50,7 +59,7 @@ function load() {
 window.onload = async function() {
   invoke("install_prism");
   invoke("get_modpacks").then(addModpacks);
-
+  console.log(downBar.style.width)
 }
 
 function addModpacks(modpacks) {

FCLauncher/src/styles.css

@@ -163,6 +163,24 @@ button {
 .show {display:block;}
 
 }
+
+.progress {
+  background-color: grey;
+  border-radius: 20px;
+  height: 15px;
+  width: 100%;
+  visibility: hidden;
+}
+.progressFinished{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #3498DB;
+  border-radius: 20px;
+  height: 100%;
+  width: 0;
+  /*transition: 1s ease 0.3s;*/
+}
 #Modpacks{
   width:300px ;
   align-content: center;
@@ -180,6 +198,7 @@ button {
   height: auto;
   background-repeat: no-repeat;
   flex-direction: column;
+  background-size: contain;
 }
 #launchGame {
   margin-top: 20px;