AJAX loading bar

[c_pattle]

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. 

[trq]

http://google.com

[c_pattle]

That does help at all

[dreamwest]

shadowbox can do that and its only 20kb (4kb gzipped)

[Adam]

Do you mean creating the actual image, or the script to display and hide it during the request?

[JonnoTheDev]

First result on Google

http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/

[c_pattle]

Thanks, yeah I have the image already I just need help with the script to make it display. 

[roopurt18]

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">
</div>

 

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!

[c_pattle]

Thanks for taking the time to right a lengthy post.  It's been very helpful.