JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/2.3.2/moment-duration-format.min.js"></script>

<div class="frame">
  <div class="frame__inner">
    <div class="counter"></div>
<input type="text" class="input_time" placeholder="minutes">
<button class="startTimer">Start Timer</button>
<div class="percent"></div>
  </div>
</div>

SCSS

.frame {
  display: flex;
align-content: center;
justify-content: center;
height: 100vh;
  &__inner {
    flex: 0;
    align-self: center;text-align: center;
  }
}
.counter {
  font-weight: 700;
  color:red;
}
.percent {
  position: absolute;
  bottom: 0;
  left:0;
  height: 20px;
  background: red;
  width: 0;
  transition: 0.5s ease all;
}

JavaScript

var elm = document.querySelector('.counter');
var count = 0;
var percent = 0;
var formattedCount = '';
function startTimer(time) {
percent = 0;

time = time * 60;
  var myInterval = setInterval(() => {
    if (count < time) {
      count++;
      formattedCount = moment.duration(parseInt(count), 'seconds');
      elm.innerHTML = formattedCount.format();
      percent = (count/time)*100;
    }
    if (count == time) {
      elm.innerHTML = 'done';
      clearInterval(myInterval);
      count = 0;
      percent = 100;
      
    }
    console.log(count);
        console.log(percent);
        document.querySelector('.percent').style.width = (Math.floor(percent) + '%')
        
        
  }, 1000)
};
document.querySelector('.startTimer').addEventListener('click', () => {
  startTimer(document.querySelector('.input_time').value);
})