How to show Progress Bar in Asp.Net using jQuery?


In this post we will discuss how to implement progress bar in using jQuery. We perform high bandwidth operations like file upload, etc. To give a bit of relief to the website user, we need to show that something is happening. The best way is to show a progress message using jQuery with overlay fade effect in the client area of browser.

Using the Code:

To show progress using jQuery, I’m using two .JS files. The first .JS file is the latest version of jQuery file downloaded from jQuery website, another file works for progress overlay and message box content.

Next is the .CSS part which is used for styling overlay fade effect and progress message box style. A GIF image is used to make the progress box more effective.

Overlay progress using jQuery can be attached with server side ASPX controls as well as HTML controls. For example, ASPX LinkButton, HyperLink, Menu, Button, DropDownList, ListBox, etc. and HTML Anchor, Select, Input, etc.

Also read some tutorials below:

– Asp.Net MVC 5 Cascading DropDownList Using jQuery

– Asp.Net MVC Techniques to transfer data from Controller to View

– Steps to archive log files using NLog with ASP.NET Core

Code ref:

$(“BODY”).append(‘<div id=”processing_overlay”></div>’);


‘<div id=”processing_container”>’ +

//'<div id=”processing_title”>This is title</div>’ +

‘<div id=”processing_content”>’ +

‘<img style=”width: 215px; height: 25px;”

src=”img/googleballs.gif” />’ +

‘<br><br>Please wait’ +

‘</div>’ +


Code Description:

The first division with id processing_ovelay is the container for complete progress context including faded color. If you need to change the color of overlay, go to .css file –> check out the style for this division –> change the value of CSS property background-color. To make the overlay more transparent or more opaque, you need to change CSS properties filter (for Internet Explorer) and opacity (for Mozilla and Opera). Pass the opacity value 1-100 in filter Alpha (for Internet Explorer) and put opacity value from 0.1-1 (for Mozilla and Opera). A change in these three properties will make the overly a match with your website theme.

The second division with id processing_container is the container for message box. That will be shown at the middle of client area vertically and centered horizontally. You can set the .css properties like border, width, height, background-color, you can put rounded, etc.

The third and the commented division with id processing_title is used to put a title for progress message box, if needed. But I suggest not to uncomment this portion if you are putting only one function to show progress (like $.showprogress() in my case), I am using it throughout my solution. So there is no specification of progress message box, though you can use it by writing more functions with different title and use it at different places in your solution.

The fourth division is the container of any message you want to show or image you want to put. Here I put an HTML image, sourced from a folder ‘img’ in root directory and named ‘googleballs.gif’. Don’t forget to specify the exact width and height of image to show the box more rigid and effective. Here, you can also write some message like ‘Loading…’, ‘Please wait’, etc. and set CSS properties like text-align, vertical-align, padding, font, etc.

Code ref:

setTimeout(function(){$(‘#’ + msgEle).fadeOut(‘normal’)},10000);

Code Description:

Here, the value 10000 means 10000 milliseconds. It is the minimum timeout value for progress effect. You can decrease or increase this value as needed.


While performing slow operations (like File Upload, etc.) on the website, give your visitors a bit of relief that something is happening…

Most of the time, you will be using jQuery function $.showprogress() and sometimes $.hideprogress() later when working with client side scripting where page does not post back to the server. In the latter case, autohide doesn’t work. That’s why you need to hide the progress manually using function $.hideprogress().

Download Asp.Net Progress bar full project.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)


Satyaprakash Samantaray

MVP Award Winner | Community Author & Contributor | Software Developer | Most Valuable Blogger(MVB)