How to use Ajax UpdateProgress control

In this tutorial you will use UpdateProgress controls to display the progress of partial-page updates. If a page contains UpdatePanel controls, you can also include UpdateProgress controls to keep users informed about the status of partial-page updates. You can use one UpdateProgress control to represent the progress of partial-page updates for the whole page. Alternatively, you can include an UpdateProgress control for every UpdatePanel control.Like this:

/* Progress Bar Style Classes */

.progressBackgroundFilter

{

top: 0px;

bottom: 0px;

left: 0px;

right: 0px;

overflow: hidden;

padding: 0;

margin: 0;

background-color: #000;

filter: alpha(opacity=50);

opacity: 0.5;

z-index: 1000;

position: absolute;

height: expression(document.body.clientHeight + "px" );

width: expression(document.body.clientWidth + "px" );

}

.processMessage

{

top: 31%;

left: 43%;

padding: 10px;

overflow: hidden;

width: 10%;

z-index: 1000;

background-color: #787878;

position: absolute;

top: expression(document.body.clientHeight * .30 + "px" );

filter: alpha(opacity=50);

opacity: 0.5;

vertical-align: middle;

}

/* Progress Bar Control */

<asp:UpdateProgress ID="updateProgress" runat="server">

<ProgressTemplate>

<div id="progressBackgroundFilter" class="progressBackgroundFilter">

div>

<div id="processMessage" class="processMessage">

<table>

<tr>

<td valign="middle">

Loading...

td>

<td valign="middle">

<img alt="" src="UsersImages/waiting.gif" style="width: 40px; height: 40px" />

td>

tr>

table>

div>

ProgressTemplate>

asp:UpdateProgress>