In this article I will explain how to display loading image when heavy tasks are executed on Page Load and Page PostBacks in ASP.Net using jQuery and JavaScript.
 
Database
For this article I am using Customers Table of Microsoft’s Northwind SQL Server database. You can download the Northwind database using the link below
 
HTML Markup
The HTML Markup contains a DropDownList, a Button and a GridView control. On the click of the btnSubmit button the data is loaded in ASP.Net GridView. Also there’s HTML DIV which is used to display the loading progress image.
Country: <asp:DropDownList ID="ddlCountries" runat="server">
    <asp:ListItem Text="All" Value="" />
    <asp:ListItem Text="USA" Value="USA" />
    <asp:ListItem Text="Brazil" Value="Brazil" />
    <asp:ListItem Text="France" Value="France" />
    <asp:ListItem Text="Germany" Value="Germany" />
</asp:DropDownList>
<asp:Button ID="btnSubmit" runat="server" Text="Load Customers"
    OnClick="btnSubmit_Click" />
<hr />
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="CustomerId" HeaderText="Customer Id" />
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
        <asp:BoundField DataField="City" HeaderText="City" />
    </Columns>
</asp:GridView>
<div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="loader.gif" alt="" />
</div>
 
 
Modal background CSS
You will need to place the following CSS in HEAD section of page for modal background.
<style type="text/css">
    .modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        min-height: 100%;
        width: 100%;
    }
    .loading
    {
        font-family: Arial;
        font-size: 10pt;
        border: 5px solid #67CFF5;
        width: 200px;
        height: 100px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>
 
 
 
Displaying the loading progress image on Page Load and PostBack
The below JavaScript and jQuery code creates a modal background and displays a loading image when the HTML form is submitted. Thus every time any control like Button, LinkButton, etc. does PostBack the modal window along with the loading progress is shown.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function ShowProgress() {
        setTimeout(function () {
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css({ top: top, left: left });
        }, 200);
    }
    $('form').live("submit", function () {
        ShowProgress();
    });
</script>
 
 
Namespaces
You will need to import the following namespaces
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
 
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
 
 
Fetching the records from database
Below is a simple code that loads all customers from the Customers table of the Northwind database and displays it is in ASP.Net GridView on btnSubmitclick. Since we are assuming this as a heavy long running process I have added Thread.Sleep in the btnSubmitclick event.
In the Page_Load you will notice that I am simply registering a startup JavaScript which is a jQuery event handler that executes btnSubmit button click client side as soon as the document is loaded. This has been done purposely to display loading progress image on Page Load also.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";
        ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
    }
}
 
protected void btnSubmit_Click(object sender, EventArgs e)
{
    // Add Fake Delay to simulate long running process.
    System.Threading.Thread.Sleep(5000);
    LoadCustomers();
}
 
private void LoadCustomers()
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT * FROM Customers WHERE Country = @Country OR @Country = ''";
    SqlCommand cmd = new SqlCommand(query);
    cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Value);
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, "Customers");
                gvCustomers.DataSource = ds;
                gvCustomers.DataBind();
            }
        }
    }
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim script As String = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });"
        ClientScript.RegisterStartupScript(Me.GetType, "load", script, True)
    End If
End Sub
 
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
    ' Add Fake Delay to simulate long running process.
    System.Threading.Thread.Sleep(5000)
    LoadCustomers()
End Sub
 
Private Sub LoadCustomers()
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim query As String = "SELECT * FROM Customers WHERE Country = @Country OR @Country = ''"
    Dim cmd As SqlCommand = New SqlCommand(query)
    cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Value)
    Dim con As SqlConnection = New SqlConnection(strConnString)
    Dim sda As SqlDataAdapter = New SqlDataAdapter
    cmd.Connection = con
    sda.SelectCommand = cmd
    Dim ds As DataSet = New DataSet
    sda.Fill(ds, "Customers")
    gvCustomers.DataSource = ds
    gvCustomers.DataBind()
End Sub
 
 
Demo
 
Downloads
 

The above code has been tested in the following browsers

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.