avnazv/toolbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Macbook
2025-12-14 00:01:54 +03:00
parent a9e57b4a38
commit a3c48b55a1
3 changed files with 67 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/static/css/layout.css
+28
View File
@@ -3,3 +3,31 @@ body {
background-repeat: repeat; background-repeat: repeat;
background-size: 512px auto; 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;
}
api/static/js/api.js
+26 -3
View File
@@ -1,4 +1,23 @@
// api.js // 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') { export async function apiRequest(url, payload = {}, method = 'POST') {
method = method.toUpperCase(); method = method.toUpperCase();
@@ -12,15 +31,16 @@ export async function apiRequest(url, payload = {}, method = 'POST') {
credentials: 'same-origin' credentials: 'same-origin'
}; };
// --- Если GET → добавляем payload в URL ---
if (method === 'GET') { if (method === 'GET') {
const params = new URLSearchParams(payload); const params = new URLSearchParams(payload);
finalUrl = `${url}?${params.toString()}`; finalUrl = `${url}?${params.toString()}`;
} else { } else {
// --- Для остальных методов → отправляем body ---
options.body = JSON.stringify(payload); options.body = JSON.stringify(payload);
} }
showLoader();
try {
const res = await fetch(finalUrl, options); const res = await fetch(finalUrl, options);
if (!res.ok) { if (!res.ok) {
@@ -28,5 +48,8 @@ export async function apiRequest(url, payload = {}, method = 'POST') {
throw new Error(`HTTP ${res.status}: ${text}`); throw new Error(`HTTP ${res.status}: ${text}`);
} }
return res.json(); return await res.json();
} finally {
hideLoader();
}
} }
api/templates/layout.html
+8
View File
@@ -25,6 +25,14 @@
<body> <body>
{% block body %}{% endblock %} {% 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 --> <!-- Bootstrap 5 JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"