使用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);
}
}