In this article I will explain how to show loading progress indicator using GIF Image when ASP.Net AJAX UpdatePanel is updating or when ASP.Net AJAX UpdatePanel is doing PostBack.
Until the AJAX call is in progress, the screen will freeze and user will not able to perform any action.
 
 
 

HTML Markup

The following HTML Markup consists of:
ScriptManager – For enabling AJAX functions.
UpdatePanel – For refreshing control.
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
    <ProgressTemplate>
        <div class="modal">
            <div class="center">
                <img alt="" src="loader.gif" />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div align="center">
            <h1>Click the button to see the UpdateProgress!</h1>
            <asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
 
 

Event handler for Button

C#
Inside the Button click event handler, I have added delay of 5 seconds so that we can view the ASP.Net AJAX UpdateProgress in action.
protected void Button1_Click(object  sender,EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
}
 
 

CSS styles in order to display UpdatePanel in center of page with background covering whole screen

The following CSS has to be placed on your page which gives AJAX UpdateProgress the look and feel and alignment we need.
<style type="text/css">
    body  {marg in:0; padding:0; font-family:Arial; }
    .modal  {position:fixed; z-index:999; height:100%; width:100%; top:0; background-color:Black; filter:alpha(opacity=60); opacity:0.6; -moz-opacity:0.8; }
    .center  {z-index:1000; margin:300px auto; padding:10px; width:130px; background-color:White; border-radius:10px; filter:alpha(opacity=100); opacity:1;-moz-opacity:1; }
    .center img  {height:128px; width:128px; }
</style>
 
 

Screenshot

Show Loading Progress Indicator using GIF Image when UpdatePanel is updating in ASP.Net
 
 

Demo

View Demo
 
 

Downloads

Download Code