<!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>