HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>progress bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="progress-wrapper">
<progress id="progress" value="50" max="100"></progress>
<span class="progress-label">Level <span id="level">0</span></span>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
`body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.progress-container {
display: flex;
}
.progress-wrapper {
position: relative;
height: 20px;
width: 200px;
}
#progress {
appearance: none;
height: 100%;
width: 100%;
border: none;
background-color: #f0f0f0;
}
.progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
color: white;
pointer-events: none;
}
`
JS
`const progress = document.getElementById('progress');
const levelElement = document.getElementById('level');
let level = 0;
levelElement.textContent = level;
function updateProgressBar() {
progress.value += 1;
if (progress.value === 100) {
level += 1;
levelElement.textContent = level;
progress.value = 0;
}
}
setInterval(updateProgressBar, 100);
`
``
Top comments (0)