HTML 5 Progress Bar For Progressive JavaScript Events Processing

Emad Al Hawary

Rate me:

5.00/5 (2 votes)

4 Dec 2012CPOL

31.2K

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>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Emad Al Hawary

Kuwait

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

HTML 5 Progress Bar For Progressive JavaScript Events Processing

License

Comments and Discussions