Hello Vikas,
If what you wonder is just how to display such a progress bar on the web
page, here is a simple example that use javascript and a html <table>
element to display a progress bar:
========================
<html xmlns="
http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var val;
var tid;
function start_progressbar()
{
val = 0;
tid = window.setInterval("on_progress()", 100);
}
function on_progress()
{
val = val + 10;
document.getElementById("td1").style.width = val;
document.getElementById("label").innerHTML = (val/400 * 100) + "%";
if((val + 10) > 400)
{
window.clearInterval(tid);
val = 0;
alert("matrix loading complete!");
}
}
</script>
</head>
<body onload="start_progressbar();">
<form id="form1" runat="server">
<div >
<table id="bar" cellpadding="0" cellspacing="0"
style="width:400;height:50;border-style:solid;border-width: 1;
border-color: black" >
said:
</td><td id="td2"></td></tr>
</table>
<div id="label" >0</div>
</div>
</form>
</body>
</html>
=================================
also, you can find more web articles provide some more complex and nice
dhtml/script based web page progress bar:
#DHTML Progress Bar Widget using JavaScript and CSS
http://www.wingo.com/dhtml/ProgressBar.html
http://www.eggheadcafe.com/articles/20010610.asp
http://www.java2s.com/Code/JavaScript/Development/Javascriptprogressbar.htm
In addition, as Laurent has said, if you want to integrate the progress bar
with some server-side operations' progress, we need to take care of other
things when implement the code logic communicate between client and server.
Please feel free to post here if you have anything unclear.
Sincerely,
Steven Cheng
Microsoft MSDN Online Support Lead
==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.
Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.
