遮罩层loading实现（css+js）支持关闭和定义提示语_loading_遮罩层 - 小郝不负流年

遮罩层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();