Use UpdateProgress To Cover Screen

As I mentioned in another post, AJAX is used to make web pages more interactive and responsive. We saw that the UpdatePanel control is an easy way of adding AJAX to a web page.

But there are times when an operation can’t be completed quickly, so to the user it might seem like nothing is going on.

ASP.NET offers the UpdateProgress control to show HTML content to the user while the browser is waiting for an AJAX operation to complete.

Please note that an UpdateProgress control can be associated to a specific UpdatePanel control, or it can be triggered by any UpdatePanel in the page.

Go ahead and create a new ASP.NET Web Application.

Open the Default.aspx page and copy the following code.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="CoverScreen._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <style type="text/css">
    	    position: fixed;
    	    z-index: 98;
    	    top: 0px;
    	    left: 0px;
    	    right: 0px;
    	    bottom: 0px;
            background-color: #aaa;
            filter: alpha(opacity=80);
            opacity: 0.8;
    	    z-index: 99;
    	    margin: 250px auto;
    	    width: 80px;
    	    height: 80px;
        .overlayContent h2
            font-size: 18px;
            font-weight: bold;
            color: #000;
        .overlayContent img
    	    width: 80px;
    	    height: 80px;

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <asp:Button ID="Button1" runat="server" Text="Click Me" onclick="Button1_Click" />

    <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1">
            <div class="overlay" />
            <div class="overlayContent">
                <img src="Images/ajax-loader.gif" alt="Loading" border="1" />


First, you’ll see a style section. The overlay class will be used to cover the screen with a semi-transparent div. That div will be made visible by the UpdateProgress control when necessary.

In order to use the UpdatePanel and UpdateProgress controls we need to add a ScriptManager control.

Then, we add the UpdatePanel with a button to trigger an asynchronous post-back.

Finally, we add the UpdateProgress control. This control has the div elements that will be made visible every time the button is clicked. The first div will cover the whole screen thanks to the style we defined earlier. Then, we show another div with some text and an image in the center of the screen.

For the image I created an animated gif on

In this sample, we explicitly associated the UpdateProgress to the UpdatePanel. This is not really necessary since we only have one UpdatePanel in the page.

Now edit the code behind.

using System;

namespace CoverScreen
    public partial class _Default : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)


        protected void Button1_Click(object sender, EventArgs e)

All we do here is to pause the thread for 3 seconds when the button is clicked so that we can see the UpdateProgress in action.

Run the project.

Cover Screen Sample

Click on the button.

Cover Screen Sample

The Loading text and image will appear for 3 seconds.

You can download the sample code here.

Please leave your comments.

Get Free Updates
Related Posts