Update app.py

app.py

@@ -231,7 +231,7 @@ def create_ui():
         display: none !important; 
     }
     """) as demo:
-        # Overlay HTML and CSS
+      # Overlay HTML and CSS
         gr.HTML("""
 <style>
 #hello-overlay {
@@ -243,17 +243,23 @@ def create_ui():
     display: flex; flex-direction: column; align-items: center; justify-content: center;
     transition: opacity 0.5s;
 }
+/* Hide the checkbox */
 #hello-overlay input[type=checkbox] {
     display: none;
 }
+/* Delayed overlay fadeout to match loading bar duration */
 #hello-overlay:has(input[type=checkbox]:checked) {
-    opacity: 0;
+    animation: overlay-fadeout 0.3s forwards;
     pointer-events: none;
-    transition: opacity 0.5s;
+}
+@keyframes overlay-fadeout {
+    0% { opacity: 1; }
+    99% { opacity: 1; }
+    100% { opacity: 0; }
 }
 .grid-particles {
     display: grid;
-    grid-template-columns: repeat(36, 1vw);
+    grid-template-columns: repeat(38, 1vw);
     grid-template-rows: repeat(8, 1vw);
     gap: 0.25vw;
     justify-content: center;
@@ -282,11 +288,7 @@ def create_ui():
 .particle.letter-a {
     background: linear-gradient(135deg, #ec6608, #ec6608);
 }
-/* Animation timing:
-   - Each letter appears one by one (0.5s delay between groups, 0.8s duration)
-   - After last letter appears (at 4.0s + 0.8s = 4.8s), all stay visible for 2s (so total 6.8s)
-   - Animation duration: 6.8s
-*/
+/* Animation timing for particles */
 .letter-h.particle  { animation: fadein 6.8s linear infinite; animation-delay: 0.0s !important; } 
 .letter-e.particle  { animation: fadein 6.8s linear infinite; animation-delay: 0.5s !important; }
 .letter-l1.particle { animation: fadein 6.8s linear infinite; animation-delay: 1.0s !important; }
@@ -299,11 +301,11 @@ def create_ui():
 
 @keyframes fadein {
     0% { opacity: 0; transform: scale(0.2);}
-    11.76% { opacity: 1; transform: scale(1);}   /* 0.8s/6.8s = 11.76% */
-    73.53% { opacity: 1; transform: scale(1);}   /* 5.0s/6.8s = 73.53% (all letters visible for 2s after last appears) */
+    11.76% { opacity: 1; transform: scale(1);}
+    73.53% { opacity: 1; transform: scale(1);}
     100% { opacity: 0; transform: scale(0.2);}
 }
-                
+
 label[for="enter-app-toggle"] {
     margin-top:4vw;
     padding:1.2rem 3rem;
@@ -320,18 +322,56 @@ label[for="enter-app-toggle"] {
     transition: background 0.3s, transform 0.2s, width 0.2s, padding 0.2s;
     display: inline-block;
     animation: gradient-move 3s linear infinite;
+    z-index: 2;
+    position: relative;
+    transform: none;
 }
-
 @keyframes gradient-move {
     0% { background-position: 0% 50%; }
     100% { background-position: 100% 50%; }
 }
-                
 label[for="enter-app-toggle"]:hover {
     transform: scale(1.08);
     padding-left: 3.5rem;
     padding-right: 3.5rem;
 }
+
+/* Loading bar styles */
+.loading-bar-container {
+    width: 320px;
+    margin: 2vw auto 0 auto;
+    height: 18px;
+    background: #151515;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px #000a inset;
+    overflow: hidden;
+    position: relative;
+    z-index: 3;
+    opacity: 1;
+    transition: opacity 0.4s;
+    display: none;
+}
+.loading-bar {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, #22ffde, #2196f3 80%);
+    border-radius: 10px;
+    transition: none;
+}
+
+/* Show loading bar and animate when button is pressed (focus/active) */
+label[for="enter-app-toggle"]:focus ~ .loading-bar-container,
+label[for="enter-app-toggle"]:active ~ .loading-bar-container {
+    display: block;
+}
+label[for="enter-app-toggle"]:focus ~ .loading-bar-container .loading-bar,
+label[for="enter-app-toggle"]:active ~ .loading-bar-container .loading-bar {
+    animation: loading-bar-fill 0.3s linear forwards;
+}
+@keyframes loading-bar-fill {
+    0% { width: 0%; }
+    100% { width: 100%; }
+}
 </style>
 <div id="hello-overlay">
     <input type="checkbox" id="enter-app-toggle"/>
@@ -383,51 +423,53 @@ label[for="enter-app-toggle"]:hover {
             <div class="particle letter-o" style="grid-column:18;grid-row:3"></div>
             <div class="particle letter-o" style="grid-column:18;grid-row:4"></div>
             <div class="particle letter-o" style="grid-column:18;grid-row:5"></div>
-            <!-- space -->
             <!-- D -->
-            <div class="particle letter-d" style="grid-column:21;grid-row:2"></div>
-            <div class="particle letter-d" style="grid-column:21;grid-row:3"></div>
-            <div class="particle letter-d" style="grid-column:21;grid-row:4"></div>
-            <div class="particle letter-d" style="grid-column:21;grid-row:5"></div>
-            <div class="particle letter-d" style="grid-column:21;grid-row:6"></div>
-            <div class="particle letter-d" style="grid-column:22;grid-row:2"></div>
-            <div class="particle letter-d" style="grid-column:22;grid-row:6"></div>
+            <div class="particle letter-d" style="grid-column:23;grid-row:2"></div>
             <div class="particle letter-d" style="grid-column:23;grid-row:3"></div>
             <div class="particle letter-d" style="grid-column:23;grid-row:4"></div>
             <div class="particle letter-d" style="grid-column:23;grid-row:5"></div>
+            <div class="particle letter-d" style="grid-column:23;grid-row:6"></div>
+            <div class="particle letter-d" style="grid-column:24;grid-row:2"></div>
+            <div class="particle letter-d" style="grid-column:24;grid-row:6"></div>
+            <div class="particle letter-d" style="grid-column:25;grid-row:3"></div>
+            <div class="particle letter-d" style="grid-column:25;grid-row:4"></div>
+            <div class="particle letter-d" style="grid-column:25;grid-row:5"></div>
             <!-- S  -->
-            <div class="particle letter-s" style="grid-column:25;grid-row:2"></div>
-            <div class="particle letter-s" style="grid-column:26;grid-row:2"></div>
             <div class="particle letter-s" style="grid-column:27;grid-row:2"></div>
-            <div class="particle letter-s" style="grid-column:25;grid-row:3"></div>
-            <div class="particle letter-s" style="grid-column:25;grid-row:4"></div>
-            <div class="particle letter-s" style="grid-column:26;grid-row:4"></div>
+            <div class="particle letter-s" style="grid-column:28;grid-row:2"></div>
+            <div class="particle letter-s" style="grid-column:29;grid-row:2"></div>
+            <div class="particle letter-s" style="grid-column:27;grid-row:3"></div>
             <div class="particle letter-s" style="grid-column:27;grid-row:4"></div>
-            <div class="particle letter-s" style="grid-column:27;grid-row:5"></div>
-            <div class="particle letter-s" style="grid-column:25;grid-row:6"></div>
-            <div class="particle letter-s" style="grid-column:26;grid-row:6"></div>
+            <div class="particle letter-s" style="grid-column:28;grid-row:4"></div>
+            <div class="particle letter-s" style="grid-column:29;grid-row:4"></div>
+            <div class="particle letter-s" style="grid-column:29;grid-row:5"></div>
             <div class="particle letter-s" style="grid-column:27;grid-row:6"></div>
+            <div class="particle letter-s" style="grid-column:28;grid-row:6"></div>
+            <div class="particle letter-s" style="grid-column:29;grid-row:6"></div>
             <!-- T  -->
-            <div class="particle letter-t" style="grid-column:29;grid-row:2"></div>
-            <div class="particle letter-t" style="grid-column:30;grid-row:2"></div>
             <div class="particle letter-t" style="grid-column:31;grid-row:2"></div>
-            <div class="particle letter-t" style="grid-column:30;grid-row:3"></div>
-            <div class="particle letter-t" style="grid-column:30;grid-row:4"></div>
-            <div class="particle letter-t" style="grid-column:30;grid-row:5"></div>
-            <div class="particle letter-t" style="grid-column:30;grid-row:6"></div>
+            <div class="particle letter-t" style="grid-column:32;grid-row:2"></div>
+            <div class="particle letter-t" style="grid-column:33;grid-row:2"></div>
+            <div class="particle letter-t" style="grid-column:32;grid-row:3"></div>
+            <div class="particle letter-t" style="grid-column:32;grid-row:4"></div>
+            <div class="particle letter-t" style="grid-column:32;grid-row:5"></div>
+            <div class="particle letter-t" style="grid-column:32;grid-row:6"></div>
             <!-- A  -->
-            <div class="particle letter-a" style="grid-column:34;grid-row:2"></div>
-            <div class="particle letter-a" style="grid-column:33;grid-row:3"></div>
+            <div class="particle letter-a" style="grid-column:36;grid-row:2"></div>
             <div class="particle letter-a" style="grid-column:35;grid-row:3"></div>
-            <div class="particle letter-a" style="grid-column:33;grid-row:4"></div>
-            <div class="particle letter-a" style="grid-column:34;grid-row:4"></div>
+            <div class="particle letter-a" style="grid-column:37;grid-row:3"></div>
             <div class="particle letter-a" style="grid-column:35;grid-row:4"></div>
-            <div class="particle letter-a" style="grid-column:33;grid-row:5"></div>
+            <div class="particle letter-a" style="grid-column:36;grid-row:4"></div>
+            <div class="particle letter-a" style="grid-column:37;grid-row:4"></div>
             <div class="particle letter-a" style="grid-column:35;grid-row:5"></div>
-            <div class="particle letter-a" style="grid-column:33;grid-row:6"></div>
+            <div class="particle letter-a" style="grid-column:37;grid-row:5"></div>
             <div class="particle letter-a" style="grid-column:35;grid-row:6"></div>
+            <div class="particle letter-a" style="grid-column:37;grid-row:6"></div>
+        </div>
+        <label for="enter-app-toggle" tabindex="0">Begin Demo</label>
+        <div class="loading-bar-container">
+            <div class="loading-bar"></div>
         </div>
-        <label for="enter-app-toggle">Begin Demo</label>
     </div>
 </div>
 """)