loadding封装
时间: 2023-07-19 20:04:11 浏览: 114
loading封装是指将常见的loading动画效果进行封装,以便在开发中快速调用和使用。一般来说,loading封装需要包含动画效果的实现以及控制动画的逻辑。
以下是一个jQuery封装loading的例子:
```javascript
$.fn.loading = function(options) {
var defaults = {
color: '#000',
size: '60px',
duration: '1s',
type: 'default'
}
var settings = $.extend({}, defaults, options);
var spinner;
var type = settings.type.toLowerCase();
switch (type) {
case 'spinner':
spinner = '<div class="spinner"></div>';
break;
case 'circle':
spinner = '<div class="loading-circle"></div>';
break;
default:
spinner = '<div class="loading"></div>';
}
var loader = $('<div></div>').addClass('loading-wrapper').css({
'position': 'fixed',
'z-index': '9999',
'top': '0',
'left': '0',
'width': '100%',
'height': '100%',
'background-color': 'rgba(255, 255, 255, 0.7)',
'text-align': 'center',
'display': 'flex',
'justify-content': 'center',
'align-items': 'center'
});
var spinnerWrapper = $('<div></div>').addClass('loading-spinner').css({
'color': settings.color,
'font-size': settings.size,
'-webkit-animation': 'spin ' + settings.duration + ' linear infinite',
'animation': 'spin ' + settings.duration + ' linear infinite'
});
spinnerWrapper.append(spinner);
loader.append(spinnerWrapper);
return this.each(function() {
$(this).on('click', function() {
$('body').append(loader);
});
});
}
```
该封装支持三种loading类型:默认、Spinner和Circle。使用时只需要在目标元素上调用loading方法,如下所示:
```javascript
$('#button').loading({
color: '#ff0000',
size: '50px',
duration: '0.5s',
type: 'spinner'
});
```
这将在按钮被点击时,在页面中显示一个Spinner类型的loading动画。