JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myProgress">
  <div id="myBar"></div>
</div>

<button onclick="move()">Click Me</button>

CSS

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #4CAF50;
}

JavaScript

var timer; var start_time;
function move() {
  var elem = document.getElementById("myBar"); 
  var width = 0;
  if (timer) {
  	clearInterval(timer);
    timer = null;
    frame();
    var time_delta = ((new Date()).getTime() - start_time.getTime()) / 1000;
    alert(time_delta + ' sekunder');
  } else {
  	timer = setInterval(frame, 10);
    start_time = new Date();
  }
  function frame() {
    if (width >= 100) {
      clearInterval(timer);
      timer = null;
      width = 0;
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
}