Block UI spinning preloader

Question

I was wondering if anyone could shed insight as to how I could add a spinning preloader (like apple uses) using the jQuery Block UI plugin. The preloader would have to spin until the AJAX content loads. Is this possible with Block UI?

Any direction would be helpful, thanks!

Answer 1

Find a good animated throbber image off the web, like this:

Set up a hidden throbber div to show it.

<div id="throbber" style="display:none;">
    <img src="/img/busy.gif" />
</div>

Tell blockUI to use that div as the message.

$.blockUI({ message: $('#throbber') });

After the ajax call completes, kill the throbber:

$.ajax({
    complete: function(data) {
        // kill the block on either success or error
        $.unblockUI();
    }
});

You can also use ajax success / error callbacks to control blockUI differently on each outcome, instead of complete.