How do people achieve the loading effect with jQuery modal windows?

Question

I'm going to be dynamically loading certain information in a modal window via ajax.

I've noticed on other sites that a small circular loading animation will appear in a modal window prior to loading the content. Does anyone know how this effect is achieved and possibly where to find the loading animation?

Thanks

Answer 1

A Google search for "ajax loader", "ajax load", "loading animation", etc. brings up http://ajaxload.info/.

Answer 2

The jQuery $.ajax() method provides for this by allowing you to specify a method to call upon ajax invoke and another method to call upon ajax response. The logical extension of this functionality is displaying a div containing an animated gif in the first call and clearing it in the second call. Here's an example. I do this in my $.ajaxSetup call when setting my ajax call defaults so that all of my ajax calls have the same behavior, but you can implement this at the $.ajax level to have potentially a different type of start/stop behavior depending on situation.

    beforeSend: function() {
        $('div#ajaxProcessingMessageDiv').show();
    },
    complete: function() {
        $('div#ajaxProcessingMessageDiv').hide();
    }

Happy coding,

Answer 3

Maybe consider using this jquery plugin BlockUI

// unblock when ajax activity stops 
$(document).ajaxStop($.unblockUI); 

function test() { 
    $.ajax({ url: 'wait.php', cache: false }); 
} 

$(document).ready(function() {  
    $('#pageDemo2').click(function() { 
        $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); 
        test(); 
    }); 
});