Click here to Skip to main content
Click here to Skip to main content

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)

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 
I tried lot of things for progress bar in .net & javascript... tired of doing so...
 
This one helped me to fix it in an hour ..
 
thanks a lot
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 
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.140709.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