Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

HTML Videos

Form Components

Color Picker Input TutorialSlider Tutorial Javascript Function ProgrammingNumeric Stepper Form Input TutorialDate Time Form Input Type TutorialProgress Bar Progressive Javascript Events ProcessingAutocomplete Text Input Datalist List Attribute TutorialAutofocus Form Input Attribute TutorialPlaceholder Form Field Input Attribute TutorialRequired Form Field Input Attribute Tutorialfieldset and legend Elements Form Area Containers TutorialCustom HTML Form Input Programming Tutorial