спиннер загрузки с сервера

2025-12-14 00:01:54 +03:00
parent a9e57b4a38
commit a3c48b55a1
3 changed files with 67 additions and 8 deletions
@@ -3,3 +3,31 @@ body {
    background-repeat: repeat;
    background-size: 512px auto;
 }
+
+.loader-bg {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+
+  /* светлый фон */
+  background: rgba(255, 255, 255, 0.85);
+
+  /* мягкая тень = эффект размытия краёв */
+  box-shadow:
+    0 0 0 8px rgba(255, 255, 255, 0.35),
+    0 0 20px rgba(0, 0, 0, 0.08);
+
+  /* чуть сглаживаем */
+  backdrop-filter: blur(2px);
+}
+
+/* плавное появление */
+#globalLoader {
+  transition: opacity .15s ease-in-out;
+}
+#globalLoader.d-none {
+  opacity: 0;
+}
+#globalLoader:not(.d-none) {
+  opacity: 1;
+}
@@ -1,4 +1,23 @@
 // api.js
+let loaderTimeout = null;
+
+function showLoader() {
+  const loader = document.getElementById('globalLoader');
+  if (!loader) return;
+
+  clearTimeout(loaderTimeout);
+  loader.classList.remove('d-none');
+}
+
+function hideLoader() {
+  const loader = document.getElementById('globalLoader');
+  if (!loader) return;
+
+  loaderTimeout = setTimeout(() => {
+    loader.classList.add('d-none');
+  }, 200); // задержка 0.2 сек
+}
+
 export async function apiRequest(url, payload = {}, method = 'POST') {
  method = method.toUpperCase();

@@ -12,21 +31,25 @@ export async function apiRequest(url, payload = {}, method = 'POST') {
    credentials: 'same-origin'
  };

-  // --- Если GET → добавляем payload в URL ---
  if (method === 'GET') {
    const params = new URLSearchParams(payload);
    finalUrl = `${url}?${params.toString()}`;
  } else {
-    // --- Для остальных методов → отправляем body ---
    options.body = JSON.stringify(payload);
  }

-  const res = await fetch(finalUrl, options);
+  showLoader();

-  if (!res.ok) {
-    const text = await res.text();
-    throw new Error(`HTTP ${res.status}: ${text}`);
+  try {
+    const res = await fetch(finalUrl, options);
+
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(`HTTP ${res.status}: ${text}`);
+    }
+
+    return await res.json();
+  } finally {
+    hideLoader();
  }
-
-  return res.json();
 }
@@ -25,6 +25,14 @@
 <body>
    {% block body %}{% endblock %}

+    <div id="globalLoader" class="position-fixed bottom-0 end-0 m-3 d-none" style="z-index: 1055;">
+        <div class="loader-bg d-flex align-items-center justify-content-center">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+    </div>
+
    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"