Info Loading Bar

public/index.html

@@ -69,6 +69,14 @@
     <div id="downloadStatus"></div>
 
     <div class="infos-container">
+
+        <div id="loaderBox" class="loader-box" style="display:none;">
+            <div></div>
+            <div></div>
+            <div></div>
+            <span>Fetching info...</span>
+        </div>
+
         <div id="videoInfo" style="margin-top: 20px;"></div>
     </div>
 

public/script/fetchinfo.js

@@ -29,6 +29,8 @@ async function fetchVideoInfo(url) {
 document.addEventListener("DOMContentLoaded", () => {
   const urlInput = document.getElementById("UrlInput");
   const infoDiv = document.getElementById("videoInfo");
+  const loaderBox = document.getElementById("loaderBox");
+
   let lastFetchedUrl = "";
 
   urlInput.addEventListener("input", async () => {
@@ -45,7 +47,9 @@ document.addEventListener("DOMContentLoaded", () => {
     if (url === lastFetchedUrl) return;
     lastFetchedUrl = url;
 
+    loaderBox.style.display = "flex";
     const data = await fetchVideoInfo(url);
+    loaderBox.style.display = "none";
 
     // Gestion des erreurs
     if (data.error) {
@@ -59,6 +63,7 @@ document.addEventListener("DOMContentLoaded", () => {
       `;
       infoDiv.classList.add("visible");
       infoDiv.classList.remove("playlist-mode");
+      loaderBox.style.display = "none";
       return;
     }
 

public/styles/components/loader.css

@@ -0,0 +1,34 @@
+.loader-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 20px;
+  background: var(--form-bg-color);
+  border: 2px solid var(--mp3-text-color);
+  border-radius: 8px;
+  color: var(--mp3-text-color);
+  font-weight: bold;
+  animation: pulse 1.2s infinite;
+}
+
+.loader-box div {
+  width: 10px;
+  height: 10px;
+  background: var(--form-button-bg-color);
+  border-radius: 3px;
+  animation: bounce 1.2s infinite;
+}
+
+.loader-box div:nth-child(1) { animation-delay: 0s; }
+.loader-box div:nth-child(2) { animation-delay: 0.2s; }
+.loader-box div:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+@keyframes pulse {
+  0%, 100% { box-shadow: 0 0 5px var(--form-button-bg-color); }
+  50% { box-shadow: 0 0 20px var(--form-button-bg-color); }
+}

public/styles/styles.css

@@ -7,6 +7,7 @@
 /* Components */
 @import url("components/checkbox.css");
 @import url("components/themebutton.css");
+@import url("components/loader.css");
 
 @import url("theme/themeimport.css");
 @import url("components/editpathbutton.css");