Click here to Skip to main content
Click here to Skip to main content
Go to top

Showing Progress Bar Using jQuery

, 26 Mar 2010
Rate this:
Please Sign up or sign in to vote.
While performing slow operations (like File Upload, etc.) on the website, give your visitors a bit of relief that something is happening...
jQueryProgress

Introduction

This article is about showing load progress using jQuery. Often 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.

The important parts which must be discussed about ‘progress.js’ file (included in demo):

//These are the top few lines of progress.js file

$("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>');

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.

//This is among bottom few lines of progress.js file
setTimeout(function(){$('#' + msgEle).fadeOut('normal')},10000);

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.

Points of Interest

Practical stuff is attached as demo. You will easily understand when you download it. The selection of events for various controls is important … some examples are given below:

  • ASPX Menu: onclick
  • ASPX Button: OnClientClick
  • ASPX DropDownList: onchange
  • ASPX HyperLink: onclick
  • ASPX LinkButton: OnClientClick
  • HTML Button: onclick
  • HTML Select: onchange
  • HTML Anchor: onclick

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().

Final Words

I hope you’ll find the stuff helpful. Thanks for reading. Good luck.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mohd Arshad (Sam)
Software Developer (Senior) Cherisys Technologies, WebStreet.in
India India

Software professional with demonstrated strength in windows-based and web-based software development. Have 4 years of experience with the full software development lifecycle including requirements, design, development, testing/QA, deployment, training & support. Have 1 year experience managing groups, planning and executing implementations. Practical working knowledge of all aspects of IT. Possess strong insight into practical business considerations.



www.cherisys.com
www.webstreet.in
www.codevdo.com
www.bizkut.com
Follow on   Twitter

Comments and Discussions

 
QuestionRE: Showing Progress Bar Using jQuery Pinmembersixtus opara16-Apr-13 22:58 
QuestionImage not appearing in Chrome and Safari browser PinmemberMember 888090615-Nov-12 2:34 
GeneralMy vote of 5 Pinmemberbinju00727-Sep-12 20:38 
Generalthe image remains static PinmemberMember 785627410-May-11 9:53 
AnswerSolution for Validators problem PinmemberLiwin27-Dec-10 3:07 
QuestionProgress.js with validators PinmemberGfw24-Nov-10 1:55 
AnswerRe: Progress.js with validators PinmemberGfw24-Nov-10 8:40 
I really like the progress.js control and I have tried it as the progress indicator both with and without update panels. I was having a problem with the asp.net validators. I played with this the validation problem this after noon and came up with a possible solution. I use nested master pages and the code is placed in the root master page just above the </form> tag (JQuery is included in the head section) as I used it in various places through out one of my web sites at http://72t.net. Please note, this is still what I consider test code and I'm still trying to make it fail.
 

// Load the Progress file - ToDo: point to the progress.min.js file.
// AppJQuery is a virtual folder where I keep all of my JQuery stuff
<script type="text/javascript" src='<%= ResolveUrl("~/AppJQuery/progress.js") %>'></script>
// Just in case it is still showing, hide it on page load. Probably not necessary
<script type="text/javascript">
function pageLoad(sender, args) {
$(document).ready(function () {
if ($.showprogress != null) $.hideprogress();
});
}
</script>
// The function that checks to see if there are any validators
// and to see if all validators return true
// If tests are passed, call the $.showprogress() method
// else merely return
<script type="text/javascript">
function ValidatePage() {
var validated = true;
if (typeof (Page_ClientValidate) == 'function') {
validated = Page_ClientValidate();
}
if (validated) { $.showprogress(); }
}
</script>
 
In my pages I used...
 
onchange="ValidatePage();"
OnClick="ValidatePage();"
OnClientClick="ValidatePage();"

 
As stated before, I'm still trying to make it fail but this should serve as a starting point. If anyone comes up with a better solution, please post it.
GeneralUpdatePanel PinmemberGfw22-Nov-10 14:48 
Generalvalidator problem Pinmemberer_ashu26-Oct-10 20:13 
GeneralRe: validator problem PinmemberRandal Bruce10-Nov-10 0:39 
GeneralError when using iframe or target="_blank" Pinmembermsaah8511-Jul-10 1:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140921.1 | Last Updated 26 Mar 2010
Article Copyright 2010 by Mohd Arshad (Sam)
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid