Progress Bar Progressive Javascript Events Processing

Learn how to tie the HTML5 progress element to progressive JavaScript events, whatever that progressive event may be. Usually it is tied to an Ajax file upload progress event.

<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<script>
function progressBarSim(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al+"%";
  bar.value = al;
  al++;
	var sim = setTimeout("progressBarSim("+al+")",300);
	if(al == 100){
	  status.innerHTML = "100%";
	  bar.value = 100;
	  clearTimeout(sim);
	  var finalMessage = document.getElementById('finalMessage');
	  finalMessage.innerHTML = "Process is complete";
	}
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
</script>