Update app.py

app.py

@@ -131,20 +131,35 @@ def randomize_seed_fn(seed: int, randomize_seed: bool) -> int:
 
 def progress_bar_html(label: str) -> str:
     """
-    Returns an HTML snippet for a thin progress bar with a label.
-    The progress bar now has a water flowing effect using a blue gradient.
+    Returns an HTML snippet for a thin progress bar with a thunder strike animation.
+    The progress bar simulates a lightning bolt streaking across a dark background.
     """
     return f'''
 <div style="display: flex; align-items: center;">
     <span style="margin-right: 10px; font-size: 14px;">{label}</span>
-    <div style="width: 110px; height: 5px; background-color: #e0f7fa; border-radius: 2px; overflow: hidden;">
-        <div style="width: 100%; height: 100%; background: linear-gradient(270deg, #00bfff, #1e90ff, #00bfff); background-size: 200% 200%; animation: flow 1.5s linear infinite;"></div>
+    <div style="width: 110px; height: 5px; background-color: #222; border-radius: 2px; position: relative; overflow: hidden;">
+        <div class="lightning"></div>
     </div>
 </div>
 <style>
-@keyframes flow {{
-    0% {{ background-position: 0% 50%; }}
-    100% {{ background-position: 100% 50%; }}
+@keyframes strike {{
+    0% {{ left: -15px; opacity: 0; }}
+    10% {{ left: 0; opacity: 1; }}
+    20% {{ left: 25px; opacity: 0; }}
+    30% {{ left: 50px; opacity: 1; }}
+    40% {{ left: 75px; opacity: 0; }}
+    50% {{ left: 90px; opacity: 1; }}
+    60% {{ left: 110px; opacity: 0; }}
+    100% {{ left: 110px; opacity: 0; }}
+}}
+
+.lightning {{
+    position: absolute;
+    width: 15px;
+    height: 5px;
+    background-color: #fff;
+    clip-path: polygon(50% 0%, 60% 30%, 50% 30%, 60% 60%, 40% 60%, 50% 100%, 30% 70%, 40% 50%, 30% 50%, 40% 30%);
+    animation: strike 2s infinite;
 }}
 </style>
     '''