JSFiddle - React, Tailwind, and code Playground

by Anu Vidhya

HTML

<div id="outer">
  <div id="inner"></div>
</div>
<button onclick="progressBarEvent()">Simulate Progress Bar</button>

CSS

#outer{ width:300px; height:20px; background:#000; padding: 4px; }
#inner{ background-color: rgba(255,255,255,0.5); width:0px; height:20px; }

JavaScript

var w = 0, t;
function _(element){
    return document.getElementById(element);
}
function progressBarEvent(){
	t = setInterval( function(){
		w++;
		if(w >= 100){
			clearInterval(t);
			alert("Simulation is complete");
		}
		_("inner").style.width = (w*3)+"px";
	}, 20 );
}