can anyone solve my problem of a smooth transition of the progress bar?

I want to reduce the progress bar according to the timer.Currently i'm giving transition to 7s delay and translateX,but whenever i clear the interval, it take some seconds to stop not immediately stops.Is there any other way to achieve this

Here is my code:

const timerHandler = (type = "start") => {
         if (type === "stop" && timer) {
             clearInterval(timer); 
             return;
          }
         let initialSecond = 60;
         timer = setInterval(() => {
            if (initialSecond <= 0) {
            clearInterval(timer);
            return;
        }
        initialSecond--;
       let progressPercent = Math.ceil(100 - (initialSecond * 100) / 60);
       progressBar.style.transform = `translateX(-${progressPercent}%)`;
       progressBar.style.backgroundColor =
          progressPercent >= 50 ? "red" : "#01e327";
}, 1000);
};

Output:

I want the green progress bar to reduce smoothly