add the cicle barre

index.html

@@ -190,6 +190,23 @@ header {
 .btn-run:hover { background:#f5ff70;box-shadow:0 0 40px rgba(232,255,71,.35); }
 .btn-run:disabled { background:var(--dim);color:var(--bg);cursor:not-allowed;box-shadow:none; }
 
+/* ── LOADING SPINNER ─────────────────────────────────────────────────────── */
+.spinner {
+  display:none;position:fixed;inset:0;z-index:999;
+  background:rgba(5,7,10,.95);backdrop-filter:blur(4px);
+  align-items:center;justify-content:center;
+}
+.spinner.active { display:flex; }
+.spinner-circle {
+  width:60px;height:60px;border:4px solid var(--dim);
+  border-top-color:var(--accent);border-right-color:var(--accent);
+  border-radius:50%;animation:spin .8s linear infinite;
+}
+@keyframes spin {
+  from { transform:rotate(0deg); }
+  to { transform:rotate(360deg); }
+}
+
 /* ── DASHBOARD ───────────────────────────────────────────────────────────── */
 #dashPage { display:none;padding:0; }
 
@@ -682,6 +699,11 @@ header {
   </button>
 </div>
 
+<!-- Loading Spinner -->
+<div class="spinner" id="loadingSpinner">
+  <div class="spinner-circle"></div>
+</div>
+
 <!-- ══ DASHBOARD PAGE ══════════════════════════════════════════════════════ -->
 <div id="dashPage">
 
@@ -1028,10 +1050,14 @@ async function loadAndRender() {
   }
   allRows = [];
   let pending = csvFiles.length + remoteCsvFiles.length;
+  document.getElementById('loadingSpinner').classList.add('active');
 
   const done = () => {
     pending--;
-    if (pending === 0) buildDashboard();
+    if (pending === 0) {
+      document.getElementById('loadingSpinner').classList.remove('active');
+      buildDashboard();
+    }
   };
 
   csvFiles.forEach(f => {