<h1 class=>Progress Bar</h1>
<div class="h-3 relative max-w-xl rounded-full overflow-hidden">
    <div class="w-full h-full bg-gray-200 absolute"></div>
    <div id="bar" class="h-full bg-green-500 relative w-0"></div>
</div>
let progress = 0;
let invervalSpeed = 10;
let incrementSpeed = 1;
document.addEventListener("DOMContentLoaded", function(){
    let bar = document.getElementById('bar');
    progressInterval = setInterval(function(){
        progress += incrementSpeed;
        bar.style.width = progress + "%";
        if(progress >= 100){
            clearInterval(progressInterval);
        }
    }, invervalSpeed);
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.6.2/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.