# How to Implement an AJAX Progress Bar in ASP.NET – Track Real-Time Processing Easily

- Link: https://techaid24.com/ajax-progress-bar-in-asp-net/
- Published: 2026-01-01T04:00:53+06:00
- Author: Selim Ahmed

In this post, we want to discuss a nice function for the implementation of an AJAX Progress Bar in ASP.NET. Before we get started, if you want to know about GridView with a subtotal and grand total, please go through the following article: C#: GridView with subtotal and total. Let’s start. First, you need to register AjaxControlToolkit with the following code: &lt;%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %&gt; 123 &nbsp;&lt;%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %&gt;&nbsp; &nbsp; Then, you should use the following code for the Ajax process ber &lt;asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server"&gt; &lt;asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional"&gt; &lt;ContentTemplate&gt; //-------------------------------- &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; &lt;asp:UpdateProgress ID="updateProgress" runat="server"&gt; &lt;ProgressTemplate&gt; &lt;div class="loading-panel"&gt; &lt;div class="loading-container"&gt; &lt;center&gt; &lt;div style="background-color: white; height: 120px; width: 400px; padding-top: 50px;" class="border border-info rounded-5"&gt; &lt;span&gt;Processing, Please wait a moment...&lt;/span&gt; &lt;br /&gt; &lt;span style="margin: 15px;"&gt;&lt;/span&gt; &lt;img src="&lt;%= this.ResolveUrl("~/images/waiting-blue.gif")%&gt;" width="350px" alt="Please wait..." /&gt; &lt;/div&gt; &lt;/center&gt; &lt;/div&gt; &lt;/div&gt; &lt;/ProgressTemplate&gt; &lt;/asp:UpdateProgress&gt; &lt;/asp:Content&gt; 123456789101112131415161718192021222324252627 &nbsp;&lt;asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ContentTemplate&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //--------------------------------&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ContentTemplate&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/asp:UpdatePanel&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;asp:UpdateProgress ID="updateProgress" runat="server"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ProgressTemplate&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="loading-panel"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="loading-container"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;center&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div style="background-color: white; height: 120px; width: 400px; padding-top: 50px;" class="border border-info rounded-5"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span&gt;Processing, Please wait a moment...&lt;/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;br /&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span style="margin: 15px;"&gt;&lt;/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="&lt;%= this.ResolveUrl("~/images/waiting-blue.gif")%&gt;" width="350px" alt="Please wait..." /&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/center&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ProgressTemplate&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/asp:UpdateProgress&gt;&lt;/asp:Content&gt;&nbsp; &nbsp; To view the process bar, you need to add some CSS code to your existing CSS file  for a better user experience: /*---------Start Ajax Update Progress----------*/ .loading-panel { background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0; position: relative; width: 100%; } .loading-container { background: rgba(49, 133, 156, 0.4) none repeat scroll 0 0; color: black; font-size: 15px; height: 100%; left: 0; padding-top: 15%; position: fixed; text-align: center; top: 0; width: 100%; z-index: 999999; align-content: center; align-items: center; } /*---------End Ajax Update Progress----------*/ 12345678910111213141516171819202122232425 &nbsp;/*---------Start Ajax Update Progress----------*/.loading-panel {&nbsp;&nbsp;&nbsp;&nbsp;background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;&nbsp;&nbsp;&nbsp;&nbsp;position: relative;&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;}&nbsp;.loading-container {&nbsp;&nbsp;&nbsp;&nbsp;background: rgba(49, 133, 156, 0.4) none repeat scroll 0 0;&nbsp;&nbsp;&nbsp;&nbsp;color: black;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 15px;&nbsp;&nbsp;&nbsp;&nbsp;height: 100%;&nbsp;&nbsp;&nbsp;&nbsp;left: 0;&nbsp;&nbsp;&nbsp;&nbsp;padding-top: 15%;&nbsp;&nbsp;&nbsp;&nbsp;position: fixed;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;&nbsp;&nbsp;&nbsp;&nbsp;top: 0;&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;&nbsp;&nbsp;&nbsp;&nbsp;z-index: 999999;&nbsp;&nbsp;&nbsp;&nbsp;align-content: center;&nbsp;&nbsp;&nbsp;&nbsp;align-items: center;}/*---------End Ajax Update Progress----------*/&nbsp; AJAX Progress Bar in ASP.NET