¿alguien puede resolver mi problema de una transición suave de la barra de progreso?

Quiero reducir la barra de progreso de acuerdo con el temporizador. Actualmente estoy dando una transición a un retraso de 7 s y traducir X, pero cada vez que borro el intervalo, se tarda unos segundos en detenerse , no se detiene inmediatamente. ¿Hay alguna otra manera de lograr esto?

Aquí está mi código:

 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); };

Producción:

Quiero que la barra de progreso verde se reduzca sin problemas