HTML5 Progress Bar runs in all browser
In the every HTML5 application which uses resources like images,video or any type of multimedia. Loading bar or The Progress Bar is barely required.
html5 progress tag is fully supported by Firefox, Chrome, Opera and other browsers like Safari 6.0, Internet Explorer 12.0 is going to support in near future.Below code will work in all browsers either it supports the progress tag or not.
See practical example of progress tag : Progress Bar Demo
Simple Code with its tutorial
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Progress Bar</title>
<script type="text/javascript" language="javascript">
var interval;
function increaseNumber(step){
var no = document.getElementById('no');
var pid = document.getElementById('progress_bar');
var curStep = parseInt(no.innerHTML);
// If progress is 100%, it should not continue progressing value.
if (curStep < 100){
no.innerHTML = curStep + step;
pid.value = no.innerHTML;
}
else
{
clearInterval(interval);
}
}
function call_increase(){
// Increase value in the progress bar. argument is no. of increment.
increaseNumber(1);
}
interval=setInterval(call_increase,100);
</script>
</head>
<body onLoad="increaseNumber(0)">
<label>Loading <span id="no">0</span>%</label><br/>
<progress id="progress_bar" max="100"></progress>
</body>
</html>
This code runs in all browsers except it supports progress tag or not. Progress graphics will not display in the browsers that do not support but it will still display progress in no.
Comments
Post a Comment
Comment anytime to improve this article.
You can comment as anonymous to comment without account.