JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<div id="wav_progress_bar">
    Progress : <div id="percent">0%</div>
</div>
<div id="debug"></div>

CSS

#wav_progress_bar{
  height:30px;
  background:url(http://www.nationaltiles.com.sg/upload/product/pic-0-246-2.jpg) #fff;
  background-size: 0px 100%;
  background-repeat: no-repeat;
  width : 400px;
  margin: 20px auto;
  border: solid 1px grey;
  text-align:center;
  padding: 5px;
  box-sizing: border-box;
  color:red;
}
#percent{
  display: inline-block;
}
#debug{
  height:300px;
  width:300px;
  margin:30px auto;
  border: solid 1px grey;
}

JavaScript

var current_percent = 50;

var intervalName = setInterval(function() {
		current_percent++;

		document.getElementById('percent').innerHTML = current_percent + '%';
    document.getElementById('wav_progress_bar').style.backgroundSize = current_percent + '% 100%';

		if (current_percent >= 100) {
	  		clearInterval(intervalName);
        
        document.getElementById('wav_progress_bar').innerHTML = 'File Uploaded';
  	}
}, 100);