stef_buwalda/dashboard_test
1
0
Fork 0
mirror of https://github.com/StefBuwalda/dashboard_test.git synced 2025-10-30 11:19:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved the progress bar / waiting bar

Browse Source
This commit is contained in:
Stef
2025-09-02 21:43:20 +02:00
parent 5a42d998d6
commit 0c580bc9f1
1 changed files with 40 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
mem/templates/home.html
View File

@@ -7,22 +7,30 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<style>
/* Prevent Bootstrap's default 0.6s width tween that causes lag */
.progress-bar {
transition: none !important;
}
</style>
</head> </head>
<body class="m-2 bg-light-subtle"> <body class="m-2 bg-light-subtle">
<div class="progress"> <div class="progress" style="height: 20px;">
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;"></div> <div id="progressBar" class="progress-bar rounded-pill" role="progressbar" style="width: 100%; margin: 0 auto;">
5s
</div>
</div> </div>
<div id="main_body" class="d-flex flex-wrap justify-content-center"></div> <div id="main_body" class="d-flex flex-wrap justify-content-center"></div>
</body> </body>
<script> <script>
let progress = 0;
const progressBar = document.getElementById('progress-bar');
const interval = 5000; // 5 seconds
const main_body = document.getElementById("main_body"); const main_body = document.getElementById("main_body");
const url = '/api/status'; const url = '/api/status';
const interval = 5000; // 5 seconds between requests
const progressBar = document.getElementById('progressBar');
function fetchData() { function fetchData() {
fetch(url, { cache: 'no-store' }) fetch(url, { cache: 'no-store' })
.then(response => response.json()) .then(response => response.json())
@@ -32,22 +40,36 @@
}) })
.catch(error => console.error("Error fetching data", error)) .catch(error => console.error("Error fetching data", error))
.finally(() => { .finally(() => {
progress = 0; // Animate progress bar over 'interval' before next fetch
progressBar.style.width = '0%'; animateProgress(interval, () => {
// Start progress animation fetchData(); // next fetch after animation
const step = 50; // ms });
const increment = step / interval * 100;
const progressInterval = setInterval(() => {
progress += increment;
if (progress >= 100) {
clearInterval(progressInterval);
}
progressBar.style.width = `${Math.min(progress, 100)}%`;
}, step);
setTimeout(fetchData, interval); // schedule next request after 5 seconds
}); });
} }
function animateProgress(duration, callback) {
const start = performance.now();
function frame(now) {
const elapsed = now - start;
const ratio = Math.min(elapsed / duration, 1);
progressBar.style.width = 100 * (1 - ratio) + "%";
progressBar.textContent = (interval * (1 - ratio) / 1000).toFixed(1) + "s";
if (ratio < 1) {
requestAnimationFrame(frame);
} else {
callback();
}
}
// reset bar and start animation
progressBar.style.width = '100%';
progressBar.textContent = '100%';
requestAnimationFrame(frame);
}
function updateWebpage(services) { function updateWebpage(services) {
main_body.innerHTML = ''; // Clear webpage main_body.innerHTML = ''; // Clear webpage