Spinnar

by cvalleskey

HTML

<span class="spin"></span>

CSS

body { background: #333; }

.spin { display: block; width: 30px; height: 30px; background-image: url(http://f.cl.ly/items/2Y0F05010N2R3A3x1i0c/spinner.png); }

JavaScript

(function($){
    $.fn.extend({ 
        spinnar: function(options) {
            var defaults = {
                height: 30,
                frames: 8,
                interval: 100
            }
            var options = $.extend(defaults, options);
            return this.each(function() {
                var obj = $(this);     
                var o = options;
                spinInt = window.setInterval(function() {
                    $(".spin").css({backgroundPositionY:
                        (parseInt($(".spin").css("backgroundPositionY")) -
                         o.height) % (o.height * o.frames)});
                    }, o.interval);
                });
                jQuery.data(obj,'spinInt',spinInt);
                if(o.kill) { return clearInterval(jQuery.data(obj,'spinInt')); }
            }
    });
})(jQuery);

$(".spin").spinnar();
$(".spin").spinnar("kill");