add throbber by start() function instead of show() element

Question

This code adds a gif throbber:

function glitch_player_display(arg1,arg2) {
        jQuery('#loader').show(); // show loading...
    jQuery.ajax({
        type: 'POST',
        url: ajaxglitch_playerajax.ajaxurl,
        data: {
            action: 'ajaxglitch_player_ajaxhandler',
            arg1: arg1,
            arg2: arg2
        },
        success: function(data, textStatus, XMLHttpRequest) {
            $('#loader').hide();
            var loadpostresult = '#showglitchplayer';
            jQuery(showglitchplayer).html('');
            jQuery(showglitchplayer).append(data);
        },
        error: function(MLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}

and the HTML:

<img src="js/ajax-loader.gif" id="loader" style="display:none;"/>

However I want to use this throbber by function

This is the code I'm trying

function glitch_player_display(arg1,arg2) {
        var throb = Throbber();
        throb.appendTo( document.getElementById( 't1' ) );
        throb.start();
                    jQuery.ajax({//etc as above

the HTML

<div id="t1" class="throb"></div>

The throbber.js code is added to the .js document and am not getting any errors in console, but no throbber either. Am I calling it incorrectly? And once it is called correctly, what will be the equivilent of $('#loader').hide()?

Answer 1

There's the throbber! It was there the whole time. A white throbber in a white background. Hiding.

And stopping it was a matter of adding throb.stop(); upon success: (where $('#loader').hide(); is, in the code above).

Throbber.js is sweet.