Update upl_csv.html

upl_csv.html

@@ -6,6 +6,8 @@
     <title>CSV Upload</title>
     <!-- Подключение стилей Notyf -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css">
+    <!-- Подключение стилей Bootstrap -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -55,31 +57,12 @@
         #uploadButton:hover {
             background-color: #388E3C;
         }
-        .loader {
-            border: 16px solid #f3f3f3;
-            border-radius: 50%;
-            border-top: 16px solid #4CAF50; /* Зелёный цвет */
-            width: 120px;
-            height: 120px;
-            -webkit-animation: spin 2s linear infinite; /* Safari */
-            animation: spin 2s linear infinite;
-            display: none; /* Изначально скрыт */
-            position: fixed; /* Фиксированное положение */
-            top: 50%; /* По центру по вертикали */
-            left: 50%; /* По центру по горизонтали */
-            transform: translate(-50%, -50%); /* Центрирование */
-            z-index: 1000; /* Убедитесь, что спиннер находится поверх других элементов */
-        }
-
-        /* Safari */
-        @-webkit-keyframes spin {
-            0% { -webkit-transform: rotate(0deg); }
-            100% { -webkit-transform: rotate(360deg); }
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+        .center-spinner {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1000;
         }
     </style>
 </head>
@@ -100,17 +83,22 @@
         <input id="uploadButton" type="submit" value="Upload">
     </form>
     <div id="result"></div>
-    <div class="loader"></div>
+    <div class="spinner-border text-success center-spinner" role="status" style="display: none;">
+        <span class="sr-only">Loading...</span>
+    </div>
 
     <!-- Подключение скрипта Notyf -->
     <script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script>
+    <!-- Подключение скриптов Bootstrap -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         document.getElementById('uploadForm').addEventListener('submit', function(event) {
             event.preventDefault();
             const form = new FormData(this);
-            const loader = document.querySelector('.loader');
+            const loader = document.querySelector('.spinner-border');
             loader.style.display = 'block'; // Показываем спиннер
-
             fetch('/upload_csv', {
                 method: 'POST',
                 body: form