Update templates/index.html

templates/index.html

@@ -89,16 +89,41 @@
         color: #ffffff;
         display: none;
         font-size: 24px;
-        animation: fade 1s ease-in-out infinite alternate;
+        animation: pulse 1s ease-in-out infinite;
     }
 
-    @keyframes fade {
+    @keyframes pulse {
         0% {
-            opacity: 0.3;
+            transform: scale(1);
+            opacity: 0.7;
         }
-        100% {
+        50% {
+            transform: scale(1.2);
             opacity: 1;
         }
+        100% {
+            transform: scale(1);
+            opacity: 0.7;
+        }
+    }
+
+    .loading-spinner {
+        display: inline-block;
+        width: 40px;
+        height: 40px;
+        border: 4px solid #ffffff;
+        border-top-color: transparent;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
     }
         
         .disabled-button {
@@ -191,9 +216,11 @@
             <button type="submit" class="btn btn-primary" id="generate-button">Generate Image</button>
         </form>
         
-        <div class="generating-message" id="generating-message">
-            Generating image... Please wait.
-        </div>
+        <div class="generating-message">
+    <span class="loading-spinner"></span>
+    Generating image... Please wait
+</div>
+
         
         <div class="social-buttons">
             <span class="social-button">