I have a simple progress bar component like below and I would like to add animation like increasing width 0% to 100% once stepCount > 0 is true. (i.e. use s.stepBarProgressed)

<div className={s.stepBarContainer}>
  <div className={s.stepBarDefault}>
    <div
      id="bar" 
      className={stepCount > 0 ? s.stepBarProgressed : s.stepBarNoProgressed} 
    />
  </div>
</div>

then my tailwind css is like this

.stepBarContainer {
  @apply w-1/6 items-center content-center flex;
}

.stepBarDefault {
  @apply w-auto bg-gray-300 rounded items-center align-middle flex-1;
}

.stepBarProgressed {
  @apply animate-bounce;
  @apply bg-teal-main text-xs leading-none py-1 text-center text-gray-600 rounded;
}

.stepBarNoProgressed {
  @apply animate-bounce;
  @apply bg-gray-300 text-xs leading-none py-1 text-center text-gray-600 rounded;
}

I've tried to add eventlistner like below but it didn't work - any way I can natively implement such animation just using Tailwind or anyway with Typescript function?

const stepChange = () => {
  document.addEventListener('click', function() {
    let progress = 0
    const intervalSpeed = 10
    const incrementSpeed = 1
    const bar = document.getElementById('bar')
    const progressInterval = setInterval(function() {
      progress += incrementSpeed
      bar!.style.width = `${progress}%`
      if(progress >= 100) {
        clearInterval(progressInterval)
      }
    }, intervalSpeed)
  })
}