Update templates/index.html

templates/index.html

@@ -61,15 +61,18 @@
 
     <div class="container">
         <h2 class="text-center mb-4">🎙️ Ses Dosyasını Metne Dönüştür</h2>
-        <form method="POST" enctype="multipart/form-data">
-            <div class="mb-3">
-                <label for="file" class="form-label">Ses Dosyası Seç (.mp3)</label>
-                <input class="form-control" type="file" name="file" id="file" required>
-            </div>
-            <div class="d-grid">
-                <button type="submit" class="btn btn-primary btn-lg">Yükle ve Dönüştür</button>
-            </div>
-        </form>
+        <form method="POST" enctype="multipart/form-data" onsubmit="showLoading()">
+    <div class="mb-3">
+        <label for="file" class="form-label">Ses Dosyası Seç (.mp3)</label>
+        <input class="form-control" type="file" name="file" id="file" required>
+    </div>
+    <div class="d-grid">
+        <button id="submitBtn" type="submit" class="btn btn-primary btn-lg">
+            Yükle ve Dönüştür
+        </button>
+    </div>
+</form>
+
 
         {% if metin %}
     <div class="output-box mt-1">
@@ -85,6 +88,16 @@
           {% endif %}
 
     </div>
+  <script>
+    function showLoading() {
+        const btn = document.getElementById('submitBtn');
+        btn.disabled = true;
+        btn.innerHTML = `
+            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+            İşleniyor...
+        `;
+    }
+    </script>
 
     <p style="position: fixed; bottom: 20px; left: 20px; color:#ffffff;">Designer by: Burak Tuğrul Aşık & Tarık Kahraman</p>