Progress Bar
progress bar is used during uploading and downloading.This is the indicator how much download or upload already completed.It give us percentage(%) calculation.Progress tag is new in html 5.
how to use it:
This is very much easy to use<progress min="0" max="100" value="25"></progress>
Min attributes means from where to start progress and max attribute means where to end.value means current
value.here the bar will fill 25%.This value will change by using javascript.
<progress id="proBar" value="0" max="100" style="width:300px;"></progress>
<span id="curr"></span>
<h1 id="comMes"></h1>
<script type="text/javascript" language="javascript">
function progressing(al) {
var bar = document.getElementById('proBar');
var status = document.getElementById('curr');
status.innerHTML = al+"%";
bar.value = al;
al++;
var update = setTimeout("progressing("+al+")",250);
if(al == 100){
status.innerHTML = "100%";
bar.value = 100;
clearTimeout(update);
var completeMessage = document.getElementById('comMes');
completeMessage.innerHTML = "Upload/Download is completed";
}
}
var now = 0;
progressing(now);
</script>
The Result of the Above Code
Demonstration
we take three tag progress,span and h1.span tag is taken for showing the number of percentage right after the
progress bar like 25% and it will increase automatically.
when progress bar will 100% we will give a message that progress completed by h1 tag.
we give id for all tags.
we create a function called progressing and give it a parameter.
we store each of our tags in variables.var bar=progress tag,status=span tag,completeMessage=h1.we grab these tag by using their id.
Now we give span element a value by using javascript innterHtml method.It sets a1 followed by a percentage symbol(%).
we set the progress bar value=a1 means each both value now same.
now we want to increase a1 value by one each time.
Now we use javascript setTimeout function.This function receive two parameter.which object is going to run and after how many milisecond later.Thats means every 250 miliseconds later it runs the progressing function.Remember we give it a parameter called a1 and we told that this will increase by 1 each time.so every 250 miliseconds later when setTimeout function runs the value of a1 increasing.
This will continue and never stop but we want to stop this process when a1=100;
thats why we give if condition.
in if function we told that if the value of a1 is equal to 100 then update both span tag's and progress bar's tags value equal to 100.
Then we stop the setTimeout function by using clearTimeout.
Now we have to give a message to user that progress is completed.
FOr that reason we grab h1.
then set the h1 value by javascript innerHtml method.
Enjoy coding.
