遮罩层loading实现,loading层完全有CSS生成,不使用图片,方便随意调整样式。js封装showSpinner、hideSpinner函数方便直接调用来打开和关闭遮罩层,同时遮罩层支持手动关闭,支持自定义提示语,默认提示语为“数据加载中...”。
效果如图
CSS代码
- #masklayer{position:fixed;top:0;left:0;z-index:9996;background-color:#000;opacity:.1;-moz-opacity:.1;filter:alpha(opacity=10)}#spinnerBox{position:fixed;width:160px;height:100px;background-color:#fff;z-index:9997;border-radius:5px}#spinnerBox #spinnerMsg{display:inline-block;position:absolute;left:39px;top:70px;color:#434343;width:82px;height:20px;font-size:14px}#spinnerBox #spinnerCloseBtn{display:inline-block;position:absolute;color:#ccc;top:6px;rightright:10px;cursor:pointer}#spinnerBox #spinnerCloseBtn:hover{color:#ea4335}#spinnerBox #spinner{position:fixed;width:42px;height:42px;z-index:9998}#spinnerBox #spinner .sp-child{width:100%;height:100%;position:absolute;left:0;top:0}#spinnerBox #spinner .sp-child:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#ea4335;border-radius:100%;-webkit-animation:spinnerBounceDelay 1.2s infinite ease-in-out both;animation:spinnerBounceDelay 1.2s infinite ease-in-out both}#spinnerBox #spinner .spinner2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}#spinnerBox #spinner .spinner3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}#spinnerBox #spinner .spinner4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}#spinnerBox #spinner .spinner5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}#spinnerBox #spinner .spinner6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}#spinnerBox #spinner .spinner7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}#spinnerBox #spinner .spinner8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}#spinnerBox #spinner .spinner9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}#spinnerBox #spinner .spinner10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}#spinnerBox #spinner .spinner11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}#spinnerBox #spinner .spinner12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}#spinnerBox #spinner .spinner2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}#spinnerBox #spinner .spinner3:before{-webkit-animation-delay:-1s;animation-delay:-1s}#spinnerBox #spinner .spinner4:before{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}#spinnerBox #spinner .spinner5:before{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}#spinnerBox #spinner .spinner6:before{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}#spinnerBox #spinner .spinner7:before{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}#spinnerBox #spinner .spinner8:before{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}#spinnerBox #spinner .spinner9:before{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}#spinnerBox #spinner .spinner10:before{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}#spinnerBox #spinner .spinner11:before{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}#spinnerBox #spinner .spinner12:before{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes spinnerBounceDelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes spinnerBounceDelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}
JS代码
- /** loading加载中.. */
- var loading = {
- defaultMsg: "数据加载中...",
- init: function () {
- var htmlArr = ['<div id="masklayer">', 'div>', '<div id="spinnerBox">', '<div id="spinner">', '<div class="spinner1 sp-child">div>',
- '<div class="spinner2 sp-child">div>', '<div class="spinner3 sp-child">div>',
- '<div class="spinner4 sp-child">div>', '<div class="spinner5 sp-child">div>',
- '<div class="spinner6 sp-child">div>', '<div class="spinner7 sp-child">div>',
- '<div class="spinner8 sp-child">div>', '<div class="spinner9 sp-child">div>',
- '<div class="spinner10 sp-child">div>', '<div class="spinner11 sp-child">div>',
- '<div class="spinner12 sp-child">div>', 'div>', '<div id="spinnerMsg">div>',
- '<div id="spinnerCloseBtn" onclick="loading.hideSpinner();" title="close loading"><i class="fa fa-close">i>div>','div>'];
- $("body").append(htmlArr.join(""));
- },
- showSpinner: function (spinnerMsg) {
- var masklayer = $("#masklayer");
- var spinnerBox = $("#spinnerBox");
- if (publicFun.isNull(masklayer[0])) {
- this.init();
- masklayer = $("#masklayer");
- spinnerBox = $("#spinnerBox");
- }
- // 遮罩层
- masklayer.width($(document).width());
- masklayer.height($(document).height());
- // 背景块
- spinnerBox.css({"top":(publicFun.getClientHeight()/2 - 100/2)});
- spinnerBox.css({"left":(publicFun.getClientWidth()/2 - 160/2)});
- // 旋转, 计算时减去msg的高度
- var spinner = $("#spinnerBox #spinner");
- spinner.css({"top":(publicFun.getClientHeight()/2 - 42/2 - 20/2)});
- spinner.css({"left":(publicFun.getClientWidth()/2 - 42/2)});
- // 设置提示语
- if(publicFun.isNull(spinnerMsg)){
- spinnerMsg = this.defaultMsg;
- }
- $("#spinnerBox #spinnerMsg").text(spinnerMsg);
- masklayer.fadeIn();
- spinnerBox.fadeIn();
- },
- hideSpinner: function () {
- var masklayer = $("#masklayer");
- masklayer && masklayer.fadeOut();
- var spinnerBox = $("#spinnerBox");
- spinnerBox && spinnerBox.fadeOut();
- }
- };
使用示例
打开遮罩层
- loading.showSpinner("正在导出...");
关闭遮罩层
- loading.hideSpinner();