Update templates/forecaster.html

templates/forecaster.html

@@ -125,13 +125,24 @@
           </form>
 
           <!-- this will animate once the form starts submitting -->
-          <div id="loadingBar" class="progress">
+          <!-- Loader bar only -->
+          <div
+            id="loaderWrapper"
+            style="display:none;
+                  position:relative;
+                  width:100%;
+                  height:4px;
+                  background:#e9ecef;
+                  margin-top:1rem;"
+          >
             <div
-              class="progress-bar progress-bar-striped progress-bar-animated"
-              role="progressbar"
-              style="width: 0%;"
+              id="loaderBar"
+              style="width:0%;
+                    height:100%;
+                    background:#0d6efd;"
             ></div>
           </div>
+
         </div>
       </div>
     </div>
@@ -146,25 +157,28 @@
   <script src="{{ url_for('static', filename='assets/js/custom.js') }}"></script>
 
   <script>
-    document.getElementById('forecastForm').addEventListener('submit', function(e) {
-      // as soon as the browser begins navigation to your Flask endpoint...
-      const barContainer = document.getElementById('loadingBar');
-      const bar = barContainer.querySelector('.progress-bar');
-      barContainer.style.display = 'block';
-      bar.style.width = '0%';
-
-      // animate it over exactly 60 seconds
-      const duration = 60_000;
-      const start = Date.now();
-      const timer = setInterval(() => {
-        const pct = Math.min(100, (Date.now() - start) / duration * 100);
-        bar.style.width = pct + '%';
-        if (pct === 100) clearInterval(timer);
-      }, 100);
-
-      // allow the form to actually submit—
-      // the animation will run in the background while the new page loads
+    document.addEventListener('DOMContentLoaded', () => {
+      const form    = document.getElementById('forecastForm');
+      const wrapper = document.getElementById('loaderWrapper');
+      const bar     = document.getElementById('loaderBar');
+    
+      form.addEventListener('submit', () => {
+        // show & reset the bar
+        wrapper.style.display = 'block';
+        bar.style.width       = '0%';
+    
+        // animate 0→100% in 45s
+        let pct = 0;
+        const intervalId = setInterval(() => {
+          pct = Math.min(100, pct + 1);
+          bar.style.width = pct + '%';
+          if (pct === 100) clearInterval(intervalId);
+        }, 450);
+    
+        // short delay to ensure paint, then submit
+        setTimeout(() => form.submit(), 50);
+      });
     });
-  </script>
+    </script>
 </body>
 </html>