materialPreloader-vanilla.js
3.45 KB
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
;(function(window) {
var materialPreloader = {
defaultsOptions: {
position: 'bottom',
height: '5px',
col_1: '#159756',
col_2: '#da4733',
col_3: '#3b78e7',
col_4: '#fdba2c',
fadeIn: 200,
fadeOut: 200
},
init: function(userOptions) {
var tempDiv = document.createElement('div'),
settings = materialPreloader.extend(materialPreloader.defaultsOptions, userOptions),
template;
materialPreloader.applyFadeConfig(settings);
template = "<div id='materialPreloader' class='load-bar invisible' style='height:" +
settings.height + ";" + settings.position +
":0px'><div class='load-bar-container'><div class='load-bar-base base1' style='background:" +
settings.col_1 +
"'><div class='color red' style='background:" + settings.col_2 +
"'></div><div class='color blue' style='background:" +
settings.col_3 +
"'></div><div class='color yellow' style='background:" +
settings.col_4 +
"'></div><div class='color green' style='background:" +
settings.col_1 +
"'></div></div></div> <div class='load-bar-container'><div class='load-bar-base base2' style='background:" +
settings.col_1 +
"'><div class='color red' style='background:" + settings.col_2 +
"'></div><div class='color blue' style='background:" +
settings.col_3 +
"'></div><div class='color yellow' style='background:" +
settings.col_4 +
"'></div> <div class='color green' style='background:" +
settings.col_1 + "'></div> </div> </div> </div>";
tempDiv.innerHTML = template;
document.body.insertBefore(tempDiv, document.body.firstChild);
return materialPreloader.public;
},
extend: function ( defaults, options ) {
var a = Object.create(defaults);
Object.keys(options).map(function(prop) {
prop in a && (a[prop] = options[prop]);
});
return a;
},
applyFadeConfig: function(settings) {
var tempStyle = document.createElement('style'),
fadeSettings = '';
if(settings.fadeIn !== 200 && materialPreloader.isInteger(settings.fadeIn)) {
fadeSettings += '.load-bar.visible { -webkit-transition-duration: ' + (settings.fadeIn/1000) + 's; transition-duration: ' + (settings.fadeIn/1000) + 's; }';
}
if(settings.fadeOut !== 200 && materialPreloader.isInteger(settings.fadeOut)) {
fadeSettings += '.load-bar.invisible { -webkit-transition-duration: ' + (settings.fadeOut/1000) + 's; transition-duration: ' + (settings.fadeOut/1000) + 's; }';
}
if(fadeSettings !== '') {
tempStyle.innerHTML = fadeSettings
document.body.insertBefore(tempStyle, document.body.firstChild);
}
},
isInteger: function(n) {
return Number(n) === n && n%1 === 0;
},
public: {
on: function() {
var materialDiv = document.getElementById('materialPreloader');
materialDiv.classList.remove('invisible');
materialDiv.classList.add('visible');
},
off: function() {
var materialDiv = document.getElementById('materialPreloader');
materialDiv.classList.remove('visible');
materialDiv.classList.add('invisible');
}
}
};
window.materialPreloader = materialPreloader.init;
})(window);