The HTML5 <progress> tag is used to display the progress of a task.The HTML5 <progress> element is used with javascript to display the progress of a task or process is underway.
html5 progress tag
<progress value=”25″ max=”100″></progress>
In the above HTML5 <progress> tag there are two attributes value and max are used . The value attribute is used to defines the current value of the progress and the max attribute is used to define the value of completion.
Below is the complete code to do progress bar with javascript. In this example the progress bar is updated every 0.5 second using JavaScript setInterval.
<!DOCTYPE HTML>
<html>
<body>
<script>
window.onload = function() {
var bar = document.getElementById(“bar”),
progress = document.getElementById(“progress “),
loaded = 0;
var load = function() {
loaded += 10;
bar.value = loaded;
/* The below will be visible if the progress tag is not supported */
$( progress).empty().append(“HTML5 progress tag not supported: ” + loaded + “% loaded”);
if(loaded == 100) {
clearInterval(dummyLoad);
}
};
var dummyLoad = setInterval(function() {
load();
} ,500);
}
</script>
The progress bar is updated every 0.5 second using JavaScript setInterval, see below: <br />
<progress value=”0″ max=”100″> <span><!– Your fallback goes here –></span> </ progress >
</body>
</html>
<html>
<body>
<script>
window.onload = function() {
var bar = document.getElementById(“bar”),
progress = document.getElementById(“progress “),
loaded = 0;
var load = function() {
loaded += 10;
bar.value = loaded;
/* The below will be visible if the progress tag is not supported */
$( progress).empty().append(“HTML5 progress tag not supported: ” + loaded + “% loaded”);
if(loaded == 100) {
clearInterval(dummyLoad);
}
};
var dummyLoad = setInterval(function() {
load();
} ,500);
}
</script>
The progress bar is updated every 0.5 second using JavaScript setInterval, see below: <br />
<progress value=”0″ max=”100″> <span><!– Your fallback goes here –></span> </ progress >
</body>
</html>
Hope you enjoy this post. If you any have suggestions or comments. please post your comments.
