JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progress"></div>

<button id="start">start</button> <button id="stop">stop</button>

CSS

#progress{
    height:10px;
    width: 10px;
    background:#FF0000;
}

JavaScript

var progressTime;
var progressLimit=300;
var progressTime=100;
var progress = $('#progress');

$('#start').click(function(){
    progressTime = Date.now();
    animateProgress();
});

$('#stop').click(function(){
    progressLimit=0;
});

function animateProgress(){
    console.log(Date.now()-progressTime);
    progressTime=Date.now();
    
    progress_width=$(progress).width();
    
    if(progress_width<progressLimit){
        $(progress).animate(
            {width: '+=20'},''+progressTime,"swing",animateProgress
        );
    }
}