JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

#progress {
    width:1px;
    background-color: blue;
    height: 10px;
    transition: width 0.1s linear;
}

JavaScript

// This makes sure that there is a method to request a callback to update the graphics for next frame
requestAnimationFrame =
    window.requestAnimationFrame || // According to the standard
    window.mozRequestAnimationFrame || // For mozilla
    window.webkitRequestAnimationFrame || // For webkit
    window.msRequestAnimationFrame || // For ie
    function (f) { window.setTimeout(function () { f(Date.now()); }, 1000/60); }; // If everthing else fails

var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;//for cancellation

// some code here
var progressTime;
var progressLimit=300;
var progressTime=100;
var progress = document.getElementById("progress");
var timer;

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

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

function animateProgress(){
    
    var t = Date().now - progressTime;
    console.log(t);
    
    if (progress.style.width < 100){
        // do some thing here
        
         progress.style.width = (t * 400 / 1000 | 0) + "px";
        
        var myAnimation = requestAnimationFrame(animateProgress)      
    }else{
       // dont use clearInterval(interval) instead when you know that animation is completed,use cancelAnimationFrame().
       window.cancelAnimationFrame(myAnimation);
    }
}