<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载中...</title>
<style>
.wait-bg{position:fixed;width:100%;height:100%;left:0;right:0;top:0;background:rgba(0,0,0,.4);z-index:10;}
.wait-confirm{width:14.83rem;height:4.66rem;background-color:#fff;border-radius:0.41rem;position:fixed;left:0;right:0;top:0px;bottom:0px;margin:auto;display:-webkit-box;display:box;-webkit-box-pack:center;box-pack:center;-webkit-box-align:center;box-align:center;z-index:15;}
.wait-confirm p{color:#333333;font-size:1.0rem;}
.wait-confirm img{width:0.95rem;margin-left:0.41rem;vertical-align:middle}
.loading{width:20px;height:20px;position:relative;margin-left:0.41rem;}
.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#de2230;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.loading .loading-container{position:absolute;width:100%;height:100%;}
.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);}
.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg);}
.circle1{top:0;left:0;}
.circle2{top:0;right:0;}
.circle3{right:0;bottom:0;}
.circle4{left:0;bottom:0;}
.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}
.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}
.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}
.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s;}
.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s;}
.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s;}
.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s;}
.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s;}
.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s;}
.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s;}
.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s;}
@-webkit-keyframes bouncedelay{
0%,80%,100%{-webkit-transform:scale(0.0)}
40%{-webkit-transform:scale(1.0)}
}
@keyframes bouncedelay{
0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0);}
40%{transform:scale(1.0);-webkit-transform:scale(1.0);}
}
</style>
</head>
<body>
<button onclick="wait()">加载中</button>
<script src="http://lib.baomitu.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var waitAlert = function() {};
waitAlert.prototype = {
waitAlert: function() {
var html = "";
html = '<div class="wait-bg"></div>\
<div class="wait-confirm">\
<p>加载中...</p>\
<div class="loading">\
<div class="loading-container container1">\
<div class="circle1"></div>\
<div class="circle2"></div>\
<div class="circle3"></div>\
</div>\
<div class="loading-container container2">\
<div class="circle1"></div>\
<div class="circle2"></div>\
<div class="circle3"></div>\
</div>\
<div class="loading-container container3">\
<div class="circle1"></div>\
<div class="circle2"></div>\
<div class="circle3"></div>\
</div>\
</div>\
</div>';
$("body").append(html);
},
remove: function(ele) {
$(ele).remove();
}
}
var waitAlert = new waitAlert();
/**
* 调用加载中
* @return {[type]} [description]
*/
function wait(){
waitAlert.waitAlert();
// 移除加载
// waitAlert.remove(".wait-bg,.wait-confirm");
}
</script>
</body>
</html>
