How to display progress indicator during ajax call in asp.net[Jquery]

In this post I will show you how to display progress indicator during ajax call.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Jquery_Progress.aspx.cs"
    Inherits="Jquery_Progress" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <style type="text/css">
        .loader
        {
            display: none;
            background-color: Red;
            width: 100px;
        }
    </style>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#btnLoad").click(function (e) {
                e.preventDefault();
                $("#gvData").html("");
                $("#loader").show();
                sendData();
            });
        });
        function sendData() {
            var loc = window.location.href;
            loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "Jquery_Progress.aspx" : loc;
            $.ajax({
                type: "POST",
                url: loc + "/GetAllProducts",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    $("#loader").hide();
                    $("#gvData").html(msg.d);
                },
                error: function () {
                    alert("An unexpected error has occurred during processing.");
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Button ID="btnLoad" runat="server" Text="LoadProduct" /><br />
    <div id="gvData">
    </div>
    <div id="loader" class="loader">
        Loading....</div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
using System.Web.Script.Serialization;
using System.Text;

public partial class Jquery_Progress : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    [WebMethod]
    [ScriptMethod]
    public static string GetAllProducts()
    {
        //Comment below line for production server
        System.Threading.Thread.Sleep(3000);
        StringBuilder sb=new StringBuilder();
        JavaScriptSerializer json=new JavaScriptSerializer();
        List<Product> products = ProductDAL.GetProducts();
        json.Serialize(products, sb);
       return sb.ToString();
    }
}
public class Product
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public string Description { get; set; }
}
public class ProductDAL
{
    public static List<Product> GetProducts()
    {
        return new List<Product>()
                   {
                       new Product() {ProductID = 1, ProductName = "P001", Description = "Desc01"},
                       new Product() {ProductID = 2, ProductName = "P002", Description = "Desc02"},
                       new Product() {ProductID = 3, ProductName = "P003", Description = "Desc03"},
                       new Product() {ProductID = 4, ProductName = "P004", Description = "Desc04"},
                       new Product() {ProductID = 5, ProductName = "P005", Description = "Desc05"},
                   };
    }
}