Click here to Skip to main content
13,249,787 members (73,750 online)
Click here to Skip to main content
Add your own
alternative version


65 bookmarked
Posted 12 Mar 2009

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

, 17 Mar 2009
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

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 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171114.1 | Last Updated 17 Mar 2009
Article Copyright 2009 by Prakash Hirani
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid