font-awesomeとjqueryを使用したspinnerの実装。

fontAwesomeSpinner.js

/**
 * スピナーオブジェクト
 */
var Spinner = function() {
    /**
     * ランダムでIDを生成する
     */
    this.id = 'spinner' + Math.floor(Math.random () * 10000) + 1;
};
Spinner.prototype = {
    /**
     * スピナーとなるHTML
     */
    'html' : '<i class="fa fa-spinner fa-spin"></i>',
    /**
     * スピナーを配置
     * @param {string} target スピナー設置先
     * @param {boolean} [to] append/before/after
     */
    'spin' : function(target, to) {
        // 同じオブジェクトでスピナーが生成されていた場合は止める
        var spinner = '#' + this.id;
        if($(spinner).length) {
            this.stop();
        }
        // スピナーHTMLを生成
        var spinner = $(this.html).attr('id', this.id).hide();
        switch(to) {
            case 'before':
                $(target).before(spinner);
                break;
            case 'after':
                $(target).after(spinner);
                break;
            case 'html':
                $(target).html(spinner);
                break;
            case 'append':
            default:
                $(target).append(spinner);
        }
        $(spinner).fadeIn();
    },
    /**
     * スピナーを停止
     */
    'stop' : function() {
        $('#' + this.id).remove();
    }
};

/** Example **/
// 継承して他のspinnerHTMLを入れられる
// Spinner.prototype.html = '';
var spinner = new Spinner();
spinner.spin('body', 'append');
spinner.stop();