HTML 5 Progress Bar For Progressive JavaScript Events Processing





5.00/5 (2 votes)
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>