Display Bootstrap Progress Bar for loading GridView data in ASP.Net using jQuery

Here I have created sample that will help you out.

HTML

<div>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=btnLoad]').bind('click', function () {
                var progress = setInterval(function () {
                    var $bar = $('.bar');
                    if ($bar.width() >= 400) {
                        clearInterval(progress);
                        $('.progress').removeClass('active');
                    } else {
                        $bar.width($bar.width() + 40);
                    }
                    $bar.text($bar.width() / 4 + "%");
                }, 540);
            });
        });            
    </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="pnl1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnLoad" Text="Load Data" runat="server" OnClick="LoadData" />
            <br />
            <br />
            <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
                runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
                    <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                    <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
                </Columns>
            </asp:GridView>
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />
    <br />
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="pnl1">
        <ProgressTemplate>
            <div style="margin-top: 20px; width: 400px;">
                <div class="progress progress-striped active">
                    <div class="bar" style="width: 0%;">
                    </div>
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</div>

Code

protected void LoadData(object sender, EventArgs e)
{
    Thread.Sleep(6000);
    this.BindData();
}

private void BindData()
{

    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
    dt.Rows.Add(1, "John Hammond", "United States");
    dt.Rows.Add(2, "Mudassar Khan", "India");
    dt.Rows.Add(3, "Suzanne Mathews", "France");
    dt.Rows.Add(4, "Robert Schidner", "Russia");
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

Screenshot