Click here to Skip to main content
11,926,961 members (50,140 online)
Click here to Skip to main content
Add your own
alternative version


65 bookmarked

Displaying a Progress Bar (Loading Box) During any Task or Work in Progress using JQuery and CSS

, 17 Mar 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
How to display a progress bar (loading box) during any task or work is running in the back end using JQuery and CSS.


This article explains how to display a progress bar (loading box) during any task or work that is running in the backend (background process) using JQuery and CSS.

Sometimes we have long processes in our web pages like photo uploading, message sending, attachment uploading etc. During these types of lengthy processes, it is nice to display some window showing current status like "Sending...", "Loading...", "Deleting..." etc. as in the following screen:


Using the Code

Let's see how to do it. The following function will create two overlays to display the progress bar.


  • progTit: Title of the progress window.
  • progText: Text content of the progress window like "Sending...", "Loading...", "Deleting...".
  • progImg: Path of the image that will be shown in the box.
$.showprogress = function(progTit, progText, progImg)
    $("BODY").append('<div id="processing_overlay"></div>');
      '<div id="processing_container">' +
        '<h1 id="processing_title">' + progTit + '</h1>' +
        '<div id="processing_content">' +
          '<div id="processing_message">'+ progText + 
                      '<br/><br/>' + progImg + '</div>' +
        '</div>' +
    var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 
               'absolute' : 'fixed'; 
        position: pos,
        zIndex: 99999,
        padding: 0,
        margin: 0
        minWidth: $("#processing_container").outerWidth(),
        maxWidth: $("#processing_container").outerWidth()
    var top = (($(window).height() / 2) - 
      ($("#processing_container").outerHeight() / 2)) + (-75);
    var left = (($(window).width() / 2) - 
      ($("#processing_container").outerWidth() / 2)) + 0;
    if( top < 0 ) top = 0;
    if( left < 0 ) left = 0;
    // IE6 fix
    if( $.browser.msie && parseInt($.browser.version) <= 6 ) top = 
        top + $(window).scrollTop();
        top: top + 'px',
        left: left + 'px'
    $("#processing_overlay").height( $(document).height() );

And to hide the progress box, I added another function as follows:

$.hideprogress = function()

Let's take an example of a simple message board system, to make this more clear.

In a message system, you have different sections like Inbox, Sent, Draft etc., and when we go to these sections by clicking links, it will take some time to display the clicked section's content. In this time, we can display a box containing text like 'Loading Inbox' with the title 'Inbox'. See the following code:

function fillinbox(){
     $.showprogress('Inbox','Loading.....','<img src="Images/loadingimage.gif"/>');

In the above example, the inbox content is loaded from the another page, and it will take some time to get that content. In between this time duration, the progress bar is displayed saying 'Loading...'.


  1. Add the jquery.js file in your page from the attached folder.
  2. Add msgwindow.js file in your page from the attached folder.
  3. Add the CSS file in your page from the attached folder.
  4. Copy the image from the 'Image' folder from the attached folder.


  • You can add a separate function in your page, or you can create a new JS file and put this function in it.
  • If you are going to add a JQuery JS file from the downloaded code, please remove the old JQuery JS file from your page if you already have one; otherwise, it will not work properly.

Points of Interest

Previously, I did not know that we could add our own functions into a JQuery file. I am surprised the function I added is working well. You can add your own functions / code in to any JQuery file.


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


About the Author

Prakash Hirani
Technical Lead IndiaNIC Infotech Ltd.
India India
• 3.6 years of experience in IT industry
• 3.6 years of Experience in Web technologies including
• Hands-on experience in Technologies including DotNet 2003/2005 (C# & – MVC Framework, MS SQL server 2003/2005/2008, java script, jQuery, Ajax, CSS, SVN, VSS.
• Hands on experience on working in N-Tire Architecture.
• Experience in HTML, DHTML, XML, CSS.
• A quick learner and good management, analytical and database designing skill.
• Experience in Application Servers including IIS 5.0/6.0/7.0

You may also be interested in...

Comments and Discussions

QuestionPls help me to do it Pin
Member 1102118914-May-15 21:14
memberMember 1102118914-May-15 21:14 
QuestionWhere do i add these js and css file? Pin
Member 1102118914-May-15 5:35
memberMember 1102118914-May-15 5:35 
QuestionAdd HTML file with plugin. Pin
Member 1102352719-Aug-14 22:16
memberMember 1102352719-Aug-14 22:16 
QuestionNot showing progress bar Pin
Member 1028672112-Jan-14 21:12
memberMember 1028672112-Jan-14 21:12 
QuestionReally well done! Pin
Massimo Aniti12-Jul-13 0:48
memberMassimo Aniti12-Jul-13 0:48 
Questionhow to use this i Pin
forumsharry29-May-13 21:57
memberforumsharry29-May-13 21:57 
GeneralMy vote of 5 Pin
Arnold198014-Apr-11 5:37
memberArnold198014-Apr-11 5:37 
GeneralRe: My vote of 5 Pin
Member 1102118914-May-15 22:35
memberMember 1102118914-May-15 22:35 
GeneralHaving trouble implementing this into the html page Pin
tasan1321-Feb-11 3:11
membertasan1321-Feb-11 3:11 
Generalwell done Pin
jquery1_43-May-10 7:09
memberjquery1_43-May-10 7:09 
GeneralNice! Pin
Sandeep Mewara25-Mar-10 9:15
memberSandeep Mewara25-Mar-10 9:15 
GeneralI did not understand how you handle the duration of showing the box Pin
Ersan Ercek11-Sep-09 2:04
memberErsan Ercek11-Sep-09 2:04 
GeneralMy vote of 1 Pin
artmark2-Apr-09 22:41
memberartmark2-Apr-09 22:41 
GeneralRe: My vote of 1 Pin
Prakash Hirani5-Apr-09 22:50
memberPrakash Hirani5-Apr-09 22:50 
GeneralRe: My vote of 1 Pin
shaikhsamir6-Apr-10 2:26
membershaikhsamir6-Apr-10 2:26 
QuestionHow can i use it ????? Pin
TitanKB19-Mar-09 18:47
memberTitanKB19-Mar-09 18:47 
QuestionHow can i use it ????? Pin
TitanKB19-Mar-09 17:51
memberTitanKB19-Mar-09 17:51 
AnswerRe: How can i use it ????? Pin
Prakash Hirani20-Mar-09 0:30
memberPrakash Hirani20-Mar-09 0:30 
GeneralRe: How can i use it ????? Pin
guessing-game15-May-09 7:33
memberguessing-game15-May-09 7:33 
GeneralUser Control Pin
isoint17-Mar-09 12:39
memberisoint17-Mar-09 12:39 
GeneralRe: User Control Pin
Prakash Hirani18-Mar-09 19:05
memberPrakash Hirani18-Mar-09 19:05 
GeneralRe: User Control Pin
isoint19-Mar-09 8:09
memberisoint19-Mar-09 8:09 
GeneralRe: User Control Pin
Prakash Hirani20-Mar-09 0:22
memberPrakash Hirani20-Mar-09 0:22 
GeneralRe: User Control Pin
isoint20-Mar-09 8:11
memberisoint20-Mar-09 8:11 
QuestionFirefox? Pin
Omer Faruk KAYA17-Mar-09 7:56
memberOmer Faruk KAYA17-Mar-09 7:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web04 | 2.8.151126.1 | Last Updated 17 Mar 2009
Article Copyright 2009 by Prakash Hirani
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid