HTML 5 Progress Bar For Progressive JavaScript Events Processing

Emad Al Hawary

5.00/5 (2 votes)

Dec 4, 2012

CPOL

31525

Try this block of HTML 5 code

Create a new HTML file and copy the following code to see the result in your browser

<html>
 <title>HTML 5 Progress Bar For Progressive Javascript Events Processing</title>
 <body>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<script type="text/javascript" language="javascript">
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>
</body> 
</html>