Progress Bar Progressive Javascript Events Processing
Published : November 16, 2014Last Edited : November 24, 2025
Author : Adam Khoury
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>