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)