Jump to content

AJAX loading bar


Recommended Posts

I was just wondering if anyone can point me in the direction or a good tutorial for creating an AJAX/Jquery loading bar.  The loading bar doesn't have to show any progress but just be on the screen for a few seconds file I'm getting data from a database etc. 


Thanks for any help. 

Link to comment
Share on other sites

This requires jQuery.


The CSS class to make.

.hidden { display: none !important; }


The HTML code to embed.

<div class="hidden" id="busy_container">
    <img alt="Busy" src="/images/working.gif" id="busy_img">


The JavaScript to make the screen busy.

* Make the screen look busy.
* @param flag bool True makes page look busy, false makes page look ready.
* @param target string Node ID of element to mask out
* @param target string Node ID of element to center image over
function busy( flag, target, center ) {
    var top, left, width, height, position, busy_container, busy_img;
    // get the busy_container and busy_img
    busy_container = $('#busy_container');
    busy_img = $('#busy_img');
    if( flag === true ) {
        // Turn target id into jquery object
        target = $('#' + target);
        // Turn center id into jquery object
        center = $('#' + center);
        // Need the target's position
        position = target.position();
        // top and left of target will go here
        top = position.top + 1;
        left = position.left + 1;
        // target will be this high and wide
        width = target.innerWidth();
        height = target.innerHeight();
        busy_container.css( 'position', 'absolute' );
        busy_container.css( 'background-color', '#eaeaea' );
        busy_container.css( 'opacity', '0.5' );
        busy_container.css( 'top', top + 'px' );
        busy_container.css( 'left', left + 'px' );
        busy_container.css( 'width', width + 'px' );
        busy_container.css( 'height', height + 'px' );
        busy_img.css( 'position', 'absolute' );
        busy_img.css( 'top', Math.floor((center.innerHeight() - busy_img.height()) / 2) + 'px' );
        busy_img.css( 'left', Math.floor((center.innerWidth() - busy_img.width()) / 2) + 'px' );
        busy_container.removeClass( 'hidden' );
    } else if( flag === false ) {
        busy_container.addClass( 'hidden' );


Let's assume you have a form with id frm_add_user.  In the onsubmit() handler you might add this code:

busy( true, 'frm_add_user', 'frm_add_user' );

When the XHR request finishes you will call this:

busy( false );


Let's assume you have a form with id frm_login inside a larger container div with id container.  When the form is submitted you want to make the entire container busy but center the busy image over the form.  You will call:

busy( true, 'container', 'frm_login' );

When the XHR request finishes you call the same thing:

busy( false );


I wrote this as a one-off for my current project.  It may require tweaking to work in yours!

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.