ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Display Bootstrap Progress Bar for loading GridView data in ASP.Net using jQuery<p>Here I have created sample that will help you out.</p> <p><span style="text-decoration: underline;">HTML</span></p> <pre class="brush: html">&lt;div&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { $(&#39;[id*=btnLoad]&#39;).bind(&#39;click&#39;, function () { var progress = setInterval(function () { var $bar = $(&#39;.bar&#39;); if ($bar.width() &gt;= 400) { clearInterval(progress); $(&#39;.progress&#39;).removeClass(&#39;active&#39;); } else { $bar.width($bar.width() + 40); } $bar.text($bar.width() / 4 + &#34;%&#34;); }, 540); }); }); &lt;/script&gt; &lt;asp:ScriptManager ID=&#34;ScriptManager1&#34; runat=&#34;server&#34;&gt; &lt;/asp:ScriptManager&gt; &lt;asp:UpdatePanel ID=&#34;pnl1&#34; runat=&#34;server&#34;&gt; &lt;ContentTemplate&gt; &lt;asp:Button ID=&#34;btnLoad&#34; Text=&#34;Load Data&#34; runat=&#34;server&#34; OnClick=&#34;LoadData&#34; /&gt; &lt;br /&gt; &lt;br /&gt; &lt;asp:GridView ID=&#34;GridView1&#34; HeaderStyle-BackColor=&#34;#3AC0F2&#34; HeaderStyle-ForeColor=&#34;White&#34; runat=&#34;server&#34; AutoGenerateColumns=&#34;false&#34;&gt; &lt;Columns&gt; &lt;asp:BoundField DataField=&#34;Id&#34; HeaderText=&#34;Id&#34; ItemStyle-Width=&#34;30&#34; /&gt; &lt;asp:BoundField DataField=&#34;Name&#34; HeaderText=&#34;Name&#34; ItemStyle-Width=&#34;150&#34; /&gt; &lt;asp:BoundField DataField=&#34;Country&#34; HeaderText=&#34;Country&#34; ItemStyle-Width=&#34;150&#34; /&gt; &lt;/Columns&gt; &lt;/asp:GridView&gt; &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; &lt;br /&gt; &lt;br /&gt; &lt;asp:UpdateProgress ID=&#34;UpdateProgress1&#34; runat=&#34;server&#34; AssociatedUpdatePanelID=&#34;pnl1&#34;&gt; &lt;ProgressTemplate&gt; &lt;div style=&#34;margin-top: 20px; width: 400px;&#34;&gt; &lt;div class=&#34;progress progress-striped active&#34;&gt; &lt;div class=&#34;bar&#34; style=&#34;width: 0%;&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/ProgressTemplate&gt; &lt;/asp:UpdateProgress&gt; &lt;/div&gt;</pre> <p><span style="text-decoration: underline;">Code</span></p> <pre class="brush: csharp">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(&#34;Id&#34;, typeof(int)), new DataColumn(&#34;Name&#34;, typeof(string)), new DataColumn(&#34;Country&#34;,typeof(string)) }); dt.Rows.Add(1, &#34;John Hammond&#34;, &#34;United States&#34;); dt.Rows.Add(2, &#34;Mudassar Khan&#34;, &#34;India&#34;); dt.Rows.Add(3, &#34;Suzanne Mathews&#34;, &#34;France&#34;); dt.Rows.Add(4, &#34;Robert Schidner&#34;, &#34;Russia&#34;); GridView1.DataSource = dt; GridView1.DataBind(); }</pre> <p><span style="text-decoration: underline;">Screenshot</span></p> <p><img src="http://i.imgur.com/37IvOze.gif" alt="" /></p>https://www.aspforums.net:443/Threads/146364/Display-Bootstrap-Progress-Bar-for-loading-GridView-data-in-ASPNet-using-jQuery/https://www.aspforums.net:443/Threads/146364/Display-Bootstrap-Progress-Bar-for-loading-GridView-data-in-ASPNet-using-jQuery/Thu, 19 Nov 2015 03:44:13 GMT