69 lines
1.2 KiB
HTML
69 lines
1.2 KiB
HTML
<div id="loading-overlay">
|
|
<div id="loading-content">
|
|
<img
|
|
src="/favicon.svg"
|
|
width="80"
|
|
class="pulse"
|
|
/>
|
|
<p id="elapsed"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
* {
|
|
scrollbar-width: none;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 0px;
|
|
}
|
|
#loading-overlay {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
}
|
|
#loading-content {
|
|
position: absolute;
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
top: 40%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function displayElapsed() {
|
|
const start = Date.now();
|
|
let elapsed = 0;
|
|
const elapsedInterval = setInterval(() => {
|
|
elapsed = Date.now() - start;
|
|
const elapsedDiv = document.getElementById("elapsed");
|
|
if (!elapsedDiv) {
|
|
clearInterval(elapsedInterval);
|
|
return;
|
|
}
|
|
elapsedDiv.textContent = (elapsed / 1000).toFixed(1);
|
|
}, 200);
|
|
}
|
|
|
|
// displayElapsed(); // debug
|
|
</script>
|