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

This asp.net tutorial explains how to implement a progress bar in asp.net 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 an overlay fade effect in the client area of the browser.

Show Progress Bar using jQuery in Asp.Net

To show progress using jQuery, I’m using two .JS files. The first .JS file is the latest version of the jQuery file downloaded from the 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.

You may also like following Asp.Net tutorials:

Code ref:

$("BODY").append('<div id="processing_overlay"></div>');
$("BODY").append(
'<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>' +
'</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 the 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 the progress message box, though you can use it by writing more functions with a 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 the root directory and named ‘googleballs.gif’.

Don’t forget to specify the exact width and height of an image to show the box more rigid and effective. Here, you can also write some messages 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.

Note:

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 the 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 the function $.hideprogress().

Download Asp.Net Progress bar full project.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>