Добавлен лоадер обработки после сканирования (спиннер + 'Обработка видео...')

templates/index.html

@@ -347,6 +347,42 @@
         @keyframes spin { to { transform: rotate(360deg); } }
         .hidden { display: none; }
 
+        /* Лоадер обработки (после сканирования) */
+        .scan-loader {
+            display: none;
+            position: fixed;
+            inset: 0;
+            z-index: 1000;
+            background: rgba(0, 0, 0, 0.7);
+            align-items: center;
+            justify-content: center;
+        }
+        .scan-loader.open {
+            display: flex;
+        }
+        .scan-loader-content {
+            text-align: center;
+            color: #fff;
+        }
+        .scan-loader-spinner {
+            width: 48px;
+            height: 48px;
+            border: 4px solid rgba(255,255,255,0.3);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin: 0 auto 20px;
+        }
+        .scan-loader-text {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        .scan-loader-sub {
+            font-size: 14px;
+            opacity: 0.8;
+        }
+
         /* Заголовок результата */
         .result-header {
             display: flex;
@@ -438,6 +474,15 @@
         <div class="scan-hint">Поместите лицо в овал целиком: лоб, глаза и подбородок — с запасом. Если голова не помещается — отодвиньте телефон</div>
     </div>
 
+    <!-- Лоадер обработки -->
+    <div class="scan-loader" id="scanLoader">
+        <div class="scan-loader-content">
+            <div class="scan-loader-spinner"></div>
+            <div class="scan-loader-text">Обработка видео...</div>
+            <div class="scan-loader-sub">Идёт анализ, это займёт несколько секунд</div>
+        </div>
+    </div>
+
     <script>
         const uploadArea = document.getElementById('uploadArea');
         const fileInput = document.getElementById('fileInput');
@@ -524,6 +569,7 @@
                     }
 
                     setProgress(100, 'Готово!');
+                    document.getElementById('scanLoader').classList.remove('open');
                     setTimeout(() => {
                         progressContainer.style.display = 'none';
                         renderResult(data);
@@ -552,6 +598,7 @@
         }
 
         function showError(msg, videoUrl) {
+            document.getElementById('scanLoader').classList.remove('open');
             progressContainer.style.display = 'none';
             resultCard.style.display = 'block';
             let html = `<div class="error-box"><strong>Ошибка:</strong> ${msg}</div>`;
@@ -565,6 +612,7 @@
         }
 
         function renderResult(data) {
+            document.getElementById('scanLoader').classList.remove('open');
             resultCard.style.display = 'block';
 
             let html = '';
@@ -729,6 +777,8 @@
                 stopCamera();
                 scanActive = false;
                 scanBtn.disabled = false;
+                // Показываем лоадер обработки
+                document.getElementById('scanLoader').classList.add('open');
                 sendVideo(blob, `scan.${ext}`);
             };
             mediaRecorder.start();