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

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.

Introduction

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:

load1.JPG

Using the Code

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

Arguments

  • 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)
{
    $.hideprogress();
    $("BODY").append('<div id="processing_overlay"></div>');
    $("BODY").append(
      '<div id="processing_container">' +
        '<h1 id="processing_title">' + progTit + '</h1>' +
        '<div id="processing_content">' +
          '<div id="processing_message">'+ progText + 
                      '<br/><br/>' + progImg + '</div>' +
        '</div>' +
      '</div>');
     
    var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 
               'absolute' : 'fixed'; 
    
    $("#processing_container").css({
        position: pos,
        zIndex: 99999,
        padding: 0,
        margin: 0
    });
        
    $("#processing_container").css({
        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();
    
    $("#processing_container").css({
        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()
{
    $("#processing_container").remove();
    $("#processing_overlay").remove();
}

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"/>');
         $.post("controller/messagecontroller.aspx",{action:'inbox',page:'1'},
         function(ret){
          $("#divResult").html(ret);
         } 
       );
       $.hideprogress();
}

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...'.

Steps

  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.

Note

  • 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.

License

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 ASP.net.
• Hands-on experience in Technologies including DotNet 2003/2005 (C# & VB.net) – 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

Comments and Discussions

 
Generalwell done Pinmemberjquery1_43-May-10 6:09 

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 17 Mar 2009
Article Copyright 2009 by Prakash Hirani
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid