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

Scuffed progress bar

Browse Source
This commit is contained in:
Stef
2025-09-02 20:26:32 +02:00
parent 7ad601fc14
commit 5a42d998d6
1 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
mem/templates/home.html
View File

@@ -9,10 +9,17 @@
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
</head> </head>
<body id="main_body" class="m-2 bg-light-subtle d-flex flex-wrap justify-content-center"> <body class="m-2 bg-light-subtle">
<div class="progress">
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;"></div>
</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';
@@ -25,7 +32,19 @@
}) })
.catch(error => console.error("Error fetching data", error)) .catch(error => console.error("Error fetching data", error))
.finally(() => { .finally(() => {
setTimeout(fetchData, 5000); // schedule next request after 5 seconds progress = 0;
progressBar.style.width = '0%';
// Start progress 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
}); });
} }