-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
71 lines (63 loc) · 1.88 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
var $ = require('jquery'),
Overlay = require('arale-overlay');
function loader(option) {
require('./loader.css');
var _this = this;
var defaults = {
number: 4,//bars numbers
speed: 100,
style: {
width: '8px',
height: '4px',
backgroundColor: '#CCC',
activeBackgroundColor: '#EA578C'
}
};
_this.o = {};
$.extend(_this.o, defaults, option);
// custom style
var style = [];
for (var i in _this.o.style) {
if (this.o.style[i] !== defaults.style[i]) {
style.push(i + ':' + this.o.style[i]);
}
}
style = style.join(';').replace('backgroundColor', 'background-color');
var barsHtml = new Array(_this.o.number).join('<i style="' + style + '"></i>');
this.overlay = new Overlay({
template: '<span class="mk-loading"><i class="mk-loading-active" style="' + style + '"></i>' + barsHtml + '</span>',
align: {
selfXY: ['50%', '50%'],
baseElement: option.target,
baseXY: ['50%', '50%']
}
});
this.play();
return this;
}
loader.prototype.play = function () {
var $loading = this.overlay.element,
$items = $loading.find('i'),
length = $items.length,
_this = this;
setInterval(function () {
var $active = $loading.find('.mk-loading-active'),
thisone = $active.index() + 1,
lastone = thisone - 1;
if (thisone === 0) {
thisone = 0;
lastone = length - 1;
}
$items.eq(lastone).removeClass('mk-loading-active').end().eq(thisone).addClass('mk-loading-active');
}, _this.o.speed);
return this;
};
loader.prototype.show = function () {
this.overlay.show();
return this;
};
loader.prototype.hide = function () {
this.overlay.hide();
return this;
}
module.exports = loader;