JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<div id="progress"><div id="cur"></div></div>
<div id="percent">0%</div>
<input id="start" type="button" value="start">

CSS

#progress{
  width:200px;
  border:1px solid gray;
}
#cur{
  height:20px;
  background:#f7cd93;
  width:0%;
}

JavaScript

var $ = function(id){
  return "string" == typeof id ?document.getElementById(id) : id;
}

var anim = function(){
  var i = 0,
      stepWidth = 10,
      duration = 1e3,
      animEle = $("cur"),
      perEle = $("percent");
  
  var step = function(){
    var nowWidth = i * stepWidth + '%';
    animEle.style.width = nowWidth;
    perEle.innerHTML = nowWidth;
  }
  
  var reset = function(){
    i = 0;
  }
  
  var start = function(){
    if(++i>10)return;
    step();
    setTimeout(function(){
        start();
    }, duration);   
  }
  
  return {
    start : function(){
      reset();
      start();
    }
  }
}();

$("start").onclick = function(){
  anim.start();
}