//var loader = new LOADER("loading");
//loader.show();
//loader.hide();
//loader.reset("loading2");
//loader.show();
var LOADER = function(target, options){
var loader;
var obj = (typeof target === 'string') ? document.getElementById(target) : target;
var lockScroll = false;
this.options = {
scrolled : false
,autoHide : true
,duration : 6500
};
for (var key in options) {
if (options.hasOwnProperty(key)) {
if(key == "duration") {
this.options[key] = options[key] || 6500;
} else {
this.options[key] = options[key];
}
}
};
this.show = function(callback) {
loader.style.display = "block";
obj.style.display = "block";
if(!self.options.scrolled){
lockScroll = true;
document.addEventListener("touchmove",scrollListener,false);
}
if(self.options.autoHide) {
setTimeout(function(){
self.hide(callback);
},self.options.duration);
} else {
if (callback) {
callback.call(this);
}
}
};
this.hide = function(callback) {
loader.style.display = "none";
obj.style.display = "none";
lockScroll = false;
document.removeEventListener("touchmove",scrollListener,false);
if (callback) {
callback.call(this);
}
};
this.reset = function(target) {
obj.removeChild(loader);
obj = (typeof target === 'string') ? document.getElementById(target) : target;
obj.appendChild(loader);
};
var self = this;
var createLoader = function(){
loader = document.createElement("div");
loader.style.display = "block";
loader.className = "ball-pulse";
for(var i = 0; i <3 ;i++) {
var ball = document.createElement("div");
loader.appendChild(ball);
}
};
var init = function() {
if(!loader){
createLoader();
}
obj.appendChild(loader);
};
var scrollListener = function(e) {
if(lockScroll){
e.preventDefault();
e.stopPropagation();
}
};
init();
};
#lo {
height: 100%;
width: 100%;
max-width: 414px;
text-align: center;
position: fixed;
z-index:99999;
top: 0px;
background: rgba(0,0,0,0.3);
display: none;
}
.loader{
width: 100%;
text-align: center;
}
<div id="lo"></div>
var loader = new LOADER("lo");
loader.show();
loader.hide();