Add loading graphics to Ajax jQuery UI tabs?

Question

How to add loading schedule to ajax jQuery UI tabs? So it pauses for half a second, displays the graphics, then loads the contents?

Here is the code I have:

<script type="text/javascript">
$(function() {
    $("#tabs").tabs({
        ajaxOptions: {
            error: function(xhr, status, index, anchor) {
                $(anchor.hash).html("I tried to load this, but couldn't. Try one of the other links?");
            }


        }
    });
});

This is the type of graphic I want to use if you are not sure:

Thank!

Answer 1

From user interface examples @ http://jqueryui.com/demos/tabs/#option-spinner

HTML , . , . span A , spinner .

Get or set the spinner option, after init.

    //getter
    var spinner = $( ".selector" ).tabs( "option", "spinner" );
    //setter
    $( ".selector" ).tabs( "option", "spinner", 'Retrieving data...' );

SO :

$(function() {
    $("#tabs").tabs({
        ajaxOptions: {
            error: function(xhr, status, index, anchor) {
                $(anchor.hash).html("I tried to load this, but couldn't. Try one of the other links?");
            },
spinner: '<img src="http://i.stack.imgur.com/Pi5r5.gif" />'


        }
    });
});