Home > Ajax, Asp.net > Using Asp.net Ajax Update Progress

Using Asp.net Ajax Update Progress

Here in this article, we will learn how to use updateprogress control that comes asp.net ajax toolkit.

<asp:ScriptManager ID=”scriptManager” runat=”server” />

<asp:UpdatePanel ID=”UdpLogin” runat=”server”>


Content comes here…


<asp:Panel ID=”UpdateProgress” runat=”server” CssClass=”ProgressContent” Width=”100%”
<asp:UpdateProgress ID=”UpdateProg” runat=”server” DisplayAfter=”1″ AssociatedUpdatePanelID=”UdpLogin”>
<asp:Panel ID=”UpdatePro” runat=”server” CssClass=”Trans” Width=”100%” Height=”100%”>
<table width=”100%” height=”100%”>
<td align=”center” valign=”middle” width=”100%” height=”100%”>
<asp:Image ID=”imgProg” runat=”server” ImageUrl=”~/img/loading.gif” AlternateText=”Updating ……”
ImageAlign=”Middle” />

Css Styles to include here are as follows:

/* StyleSheet for Update Progress */
font-family: verdana;
font-size: 11px;
color: #000000;
font-weight: normal;
text-decoration: none;

background-color: White;
filter: alpha(opacity=70);
opacity: 0.7;
position: absolute;
left: 0px;
top: 0px;
font-family: verdana;
font-size: x-small;
color: Green;
font-weight: bold;
text-decoration: none;
height: auto;

Please visit my previous article for downloading loading images:


  1. August 21, 2010 at 1:33 pm

    thanks good work

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: