Jquery通用页面加载插件

使用glyphicon字体图标库，可自行更换，图标旋转不会晃动
JS部分：

(function ($) {
    var methods = {
        show: function () {
            return this.each(function (i) {
                var _this = $(this); if (_this.css('position') != 'absolute' && _this.css('position') != 'relative') { _this.css('position', 'relative'); }
                _this.prepend('<div class="jqloading"><span class="glyphicon glyphicon-refresh"></span></div>');
            });
        }, hide: function () { return this.each(function (i) { var _this = $(this); _this.find('.jqloading').remove(); }); }
    }
    $.fn.jqloading = function (options) {
        var method = arguments[0]; if (methods[method]) { method = methods[method]; } else if (!method) { method = methods.show; } else { $.error('error'); return this; }
        return method.apply(this, arguments);
    }
})(jQuery)

CSS部分：

.jqloading {
    z-index: 99;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
}

    .jqloading > .glyphicon-refresh {
        font-size: 32px;
        animation: retoteFontIcon linear 1s infinite;
    }

@keyframes retoteFontIcon {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}