How to show the Loader image like in gmail when loading Data into GridView?
<p>Could any one help how to show the loader image when the data is loading ?I did a sample one which is not a perfect one.Please suggest me the best way .I have a question can we use jquery or javascript?Here when i click the load the data has to load to GV in between this process the preloader has to be visible like in GMAIL.<img src="http://i.stack.imgur.com/7KZCN.jpg" alt="Like this Process">
<img src="http://i.stack.imgur.com/c6u3d.jpg" alt="Demo Picture"></p>

<pre><code>  &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Loader Image While Loading Data in GV.aspx.cs"
    Inherits="Loader_Image_While_Loading_Data_in_GV" %&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="server"&gt;
    &lt;title&gt;Loader Image While Loading Data in GV&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
    &lt;div&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Image ID="load_img" runat="server" Height="70px" Width="70px" ImageUrl="~/Images/ajax-loader_green.gif"
                        Visible="false" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:Button ID="btnload" runat="server" Text="Load" OnClick="btnload_Click" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;asp:GridView ID="gv1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"
                        BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None"&gt;
                        &lt;AlternatingRowStyle BackColor="PaleGoldenrod" /&gt;
                        &lt;FooterStyle BackColor="Tan" /&gt;
                        &lt;HeaderStyle BackColor="Tan" Font-Bold="True" /&gt;
                        &lt;PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" /&gt;
                        &lt;SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" /&gt;
                        &lt;SortedAscendingCellStyle BackColor="#FAFAE7" /&gt;
                        &lt;SortedAscendingHeaderStyle BackColor="#DAC09E" /&gt;
                        &lt;SortedDescendingCellStyle BackColor="#E1DB9C" /&gt;
                        &lt;SortedDescendingHeaderStyle BackColor="#C2A47B" /&gt;
                    &lt;/asp:GridView&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>In the Code behind i wrote like this </p>

<pre><code>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AdventureWorksModel;

public partial class Loader_Image_While_Loading_Data_in_GV : System.Web.UI.Page
{
    AdventureWorksEntities awe = new AdventureWorksEntities();
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnload_Click(object sender, EventArgs e)
    {
        load_img.Visible = true;
        gv1.DataSource = awe.CountryRegionCurrencies.ToList();
        gv1.DataBind();
        load_img.Visible = false;
    }
}
</code></pre>
