<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Screen</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f0f0f0;
font-family: Arial, sans-serif;
}
.loader-container {
text-align: center;
}
.progress-bar {
position: relative;
width: 300px;
height: 20px;
background: #ddd;
border-radius: 10px;
overflow: hidden;
margin: 20px auto;
}
.progress {
width: 0;
height: 100%;
background: #76c7c0;
transition: width 1s linear;
}
.loading-text {
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div class="loader-container">
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<div class="loading-text" id="loading-text">Loading... 0%</div>
</div>
<script>
const progressBar = document.getElementById('progress');
const loadingText = document.getElementById('loading-text');
let progress = 0;
const totalDuration = 60 * 60 * 1000; // 1 hour in milliseconds
const intervalTime = 1000; // Update every second
const increment = (intervalTime / totalDuration) * 100;
const interval = setInterval(() => {
progress += increment;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
loadingText.textContent = "Completed!";
} else {
progressBar.style.width = progress + '%';
loadingText.textContent = `Loading... ${Math.floor(progress)}%`;
}
}, intervalTime);
</script>
</body>
</html>