How to display progress bar using JavaScript?

Progress bar is very important to update the user about the status of long running processes.
We shall do it for many desktop applications, since it is very easy to get the status at that instant and update in user interface.
When you use web applications that are not the case, when user interacts with server it reloads the page after the response is completed and then updates the client browser.

So best way of handling it similar to a desktop application is using XMLHttpRequestObject. (Please refer to my earlier posts regarding xmlhttp request
http://programmerfindings.blogspot.com/2008/09/what-is-xmlhttprequest.html).
Where I shall set a timer on client browser, such that for every tick it calls a server page using XmlHttp object and retrieves the response in percentage about the process status and displays it in the user interface along with progress bar using DHTML.

Ex:-
//This is like timer which calls the “DisplayPaymentsStatus” function for //every 2000 milliseconds. Which I shall initiate before starting the //process or when user clicks on button.
Var tmrPaySts=window.setTimeout("DisplayPaymentsStatus();",2000);

function DisplayPaymentsStatus()
{
try
{
var xmlHttp=getAjaxObject();
if(xmlHttp==null)
{
CalPysPrcs(false);
return;
}

if(xmlHttp!=null)
{
var url="../XmlHttp.aspx?For=5";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {

if(IsNumeric(xmlHttp.responseText))
{
//showing progress bar
document.getElementById('prgs').style.display=’block’;
//calling a javascript function which updates the progress
//bar in UI according to the percentage recived thrpugh response text
ShowProcessPercent(xmlHttp.responseText);
document.getElementById('lblPayStatus').innerText='Processing';
if(xmlHttp.responseText==”100”)
{
document.getElementById('prgs').style.display=’none’;
document.getElementById('lblPayStatus').innerText=’’;
alert(‘Process completed’);
//stoping or disabling timer

clearTimeout(tmrPaySts);

}
}
else
{
//Hiding the progress bar
//IF response text is other than numercic, it is the
//message which I am sending from serverpage if any //error
document.getElementById('prgs').style.display=’none’;
document.getElementById('lblPayStatus').innerText=’’;
alert(xmlHttp.responseText);
//stoping or disabling timer
clearTimeout(tmrPaySts);
}
}
}

xmlHttp.send(null);
}

}
catch(e)
{
alert(e);
CalPysPrcs(false);
//stoping or disabling
clearTimeout(tmrPaySts);

}
}


function ShowProcessPercent(percent)
{
try
{
percent=Math.round (percent ,2);
//Based upon the percentage the function recoevs through parameter, //it generates dynamic html (DHTML) creating a “DIV tag|” inside a //label. The width of the div tag is updates according to the //percentage.
document.getElementById('prgs').innerHTML='<DIV ID="percent" STYLE="filter: alpha (opacity=60);text-align:center;position: absolute;width:' + percent+ '%;vertical-align: middle;background-color:#d4ded8;"></div><center><b>'+percent+'%</b></center>';
}
catch(e)
{
CalPysPrcs(false);
}
}

I will place this div tag in html page which is the boundary for progress bar.
<div id="prgs" style="border:2px solid black;width:100%;display:none;">

</div>


Output :