纯js css3 实现loading demo

提供 show    redo  hide 三个函数

支持callback，自动隐藏，锁屏幕不可滚动

loading.js

var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
wp: u.indexOf("Windows Phone") > -1,//windows phone
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/Mobile/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
};
}()
};
var ctrlType = browser.versions.mobile ? 'tap' :'click';

//LOADER.show()
//var loader = new LOADER();
var LOADER = function(option){

var bg = document.createElement("loader");
bg.id = new Date().getTime();
bg.classList.add("loaded");
var l,r,btn;
var lockScroll = false;
this.options = {
scrolled : false
,autohide : false
,duration : 6500
};
for (var key in option) {
if (options.hasOwnProperty(key)) {
if(key == "duration") {
this.options[key] = option[key] || 6500;
} else {
this.options[key] = option[key];
}
}
};
var init = function() {
l = document.createElement("div");
l.style.display = "none";
l.className = "ball-clip-rotate";
for(var i = 0; i <1 ;i++) {
var ball = document.createElement("div");
l.appendChild(ball);
}
bg.appendChild(l);

r = document.createElement("div");
r.style.display = "none";
r.classList.add("btn-commit");
r.classList.add("redo");
btn = document.createElement("span")
$(btn).html("刷新");
r.appendChild(btn);
bg.appendChild(r);
$(btn).on(ctrlType,function(e){
self.show();
});
};
var scrollListener = function(e) {
if(lockScroll){
e.preventDefault();
e.stopPropagation();
}
};
var append = function() {
if(!document.getElementById(bg.id)) {
document.body.appendChild(bg);
}
}
this.show = function(callback) {
append();
l.style.display = "block";
r.style.display = "none";
if(!self.options.scrolled){
lockScroll = true;
$("body").on("touchmove", scrollListener);
}
if(self.options.autohide) {
setTimeout(function(){
self.hide(callback);
},self.options.duration);
} else {
if (callback) {
callback.call(self);
}
}
};
this.hide = function(callback) {
document.body.removeChild(bg);
lockScroll = false;
$("body").off("touchmove", scrollListener);
if (callback) {
callback.call(callback);
}
};
this.redo = function(callback){
append();
l.style.display = "none";
r.style.display = "block";
if(callback) {
$(btn).on(ctrlType,callback);
$(btn).on(ctrlType,function m(){
$(btn).off(ctrlType,callback);
$(btn).off(ctrlType,m);
})
}
if(!self.options.scrolled){
lockScroll = true;
$("body").on("touchmove", scrollListener);
}
};
var self = this;
init();
return self;
};

loading.css

loader {
opacity: 0;
background-color: rgba(255,255,255,0.5);
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: fixed;
z-index: 99999;
margin: auto;
top: 0;
left: 0;
right: 0;
}
loader.loaded {
transition: opacity .25s linear;
opacity: 1;
}
.ball-clip-rotate > div {
background-color: #fff;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
border: 2px solid #b9b9b9;
border-bottom-color: transparent;
height: 25px;
width: 25px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 0.75s 0s linear infinite;
animation: rotate 0.75s 0s linear infinite; }

@keyframes rotate {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1); }

50% {
-webkit-transform: rotate(180deg) scale(0.6);
transform: rotate(180deg) scale(0.6); }

100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1); } }

@keyframes scale {
30% {
-webkit-transform: scale(0.3);
transform: scale(0.3); }

100% {
-webkit-transform: scale(1);
transform: scale(1); } }

.ball-clip-rotate-pulse {
position: relative;
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px); }
.ball-clip-rotate-pulse > div {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
top: 0px;
left: 0px;
border-radius: 100%; }
.ball-clip-rotate-pulse > div:first-child {
background: #fff;
height: 16px;
width: 16px;
top: 9px;
left: 9px;
-webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite; }
.ball-clip-rotate-pulse > div:last-child {
position: absolute;
border: 2px solid #fff;
width: 30px;
height: 30px;
background: transparent;
border: 2px solid;
border-color: #fff transparent #fff transparent;
-webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
-webkit-animation-duration: 1s;
animation-duration: 1s; }

.btn-commit {
width: 100%
}
.btn-commit span {
width: 90%;
text-align: center;
display: block;
border: 1px solid #DFDFDF;
padding: 0.1rem 0;
margin: 0 auto;
border-radius: 0.05rem;
}
.btn-commit.redo span {
width: 25%;
}

loading.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<script src="zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="zepto.touch.min.js" type="text/javascript" charset="utf-8"></script>
<script src="laoding.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="loading.css"/>
<script>
// var lo = new LOADER({
// scrolled = true //true 可滚动， false不可滚动 默认false
// ,autohide = true //true 自动隐藏 , 默认false
// ,duration = 1000 //自动隐藏延迟 默认6500毫秒
// });
var lo = new LOADER();
var flag = true;
function temopShow() {
lo.show(function(){
tempDelay();
});
}
function tempDelay (){
setTimeout(function(){
lo.redo(function(){
temopShow();
})
},2000);
}
document.addEventListener("DOMContentLoaded",function(){
temopShow();
},false);
document.addEventListener("doubleTap",function(){
if(flag) {
lo.hide(function(){
});
} else {
temopShow();
}
flag = !flag;
})
</script>
</head>
<body>

</body>
</html>