JSFiddle - React, Tailwind, and code Playground

by masaab algailani

HTML

<progress id="imageSeeker" max="100" value="1"></progress>
<button id="theButton">Start!</button>
<button id ="theButton2">Pause</button>

JavaScript

var imageTimeElapsed = 0;
var  myInterval = null;

$("#theButton").on("click", function(){
    increaseProgressBar();
});
$("#theButton2").on("click", function(){
    clearInterval(myInterval);
});
function increaseProgressBar(){
    
    myInterval = setInterval(function(){
    imageTimeElapsed= imageTimeElapsed + 10;
        $("#imageSeeker").val(imageTimeElapsed);
    if(imageTimeElapsed === 100){
        clearInterval(myInterval);
        alert("All Done");
    }
}, 1000);
}