遮罩层loading实现(css+js)支持关闭和定义提示语

小郝不负流年
小郝不负流年   + 关注
2020-12-26 09:00:00   阅读1294   评论0

遮罩层loading实现,loading层完全有CSS生成,不使用图片,方便随意调整样式。js封装showSpinner、hideSpinner函数方便直接调用来打开和关闭遮罩层,同时遮罩层支持手动关闭,支持自定义提示语,默认提示语为“数据加载中...”。

效果如图

CSS代码


  1. #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代码


  1. /**  loading加载中.. */  
  2. var loading = {  
  3.     defaultMsg: "数据加载中...",  
  4.     init: function () {  
  5.         var htmlArr = ['<div id="masklayer">', 'div>', '<div id="spinnerBox">', '<div id="spinner">', '<div class="spinner1 sp-child">div>',  
  6.             '<div class="spinner2 sp-child">div>', '<div class="spinner3 sp-child">div>',  
  7.             '<div class="spinner4 sp-child">div>', '<div class="spinner5 sp-child">div>',  
  8.             '<div class="spinner6 sp-child">div>', '<div class="spinner7 sp-child">div>',  
  9.             '<div class="spinner8 sp-child">div>', '<div class="spinner9 sp-child">div>',  
  10.             '<div class="spinner10 sp-child">div>', '<div class="spinner11 sp-child">div>',  
  11.             '<div class="spinner12 sp-child">div>', 'div>', '<div id="spinnerMsg">div>',  
  12.             '<div id="spinnerCloseBtn" onclick="loading.hideSpinner();" title="close loading"><i class="fa fa-close">i>div>','div>'];  
  13.         $("body").append(htmlArr.join(""));  
  14.     },  
  15.     showSpinner: function (spinnerMsg) {  
  16.         var masklayer = $("#masklayer");  
  17.         var spinnerBox = $("#spinnerBox");  
  18.         if (publicFun.isNull(masklayer[0])) {  
  19.             this.init();  
  20.             masklayer = $("#masklayer");  
  21.             spinnerBox = $("#spinnerBox");  
  22.         }  
  23.         // 遮罩层  
  24.         masklayer.width($(document).width());  
  25.         masklayer.height($(document).height());  
  26.         // 背景块  
  27.         spinnerBox.css({"top":(publicFun.getClientHeight()/2 - 100/2)});  
  28.         spinnerBox.css({"left":(publicFun.getClientWidth()/2 - 160/2)});  
  29.         // 旋转, 计算时减去msg的高度  
  30.         var spinner = $("#spinnerBox #spinner");  
  31.         spinner.css({"top":(publicFun.getClientHeight()/2 - 42/2 - 20/2)});  
  32.         spinner.css({"left":(publicFun.getClientWidth()/2 - 42/2)});  
  33.         // 设置提示语  
  34.         if(publicFun.isNull(spinnerMsg)){  
  35.             spinnerMsg = this.defaultMsg;  
  36.         }  
  37.         $("#spinnerBox #spinnerMsg").text(spinnerMsg);  
  38.   
  39.         masklayer.fadeIn();  
  40.         spinnerBox.fadeIn();  
  41.     },  
  42.     hideSpinner: function () {  
  43.         var masklayer = $("#masklayer");  
  44.         masklayer && masklayer.fadeOut();  
  45.         var spinnerBox = $("#spinnerBox");  
  46.         spinnerBox && spinnerBox.fadeOut();  
  47.     }  
  48. };  


使用示例

打开遮罩层


  1. loading.showSpinner("正在导出...");  


关闭遮罩层

  1. loading.hideSpinner();  


对我有用,我要     转载  
文章分类: Web前端  
所属标签: loading   遮罩层  
  • 0条评论
  • 只看作者
  • 按时间|按热度
  • 由于本人多次涉及需要打印这个证明,而每次都会忘记入口,在网上各种搜索各种摸索很是浪费时间。故本次将操作流程整理记录下来,以备忘。同时也分享给大家。1、打开湖北政务服务网,地址:http://zwfw.hubei.gov.cn/s/index.html2、切换区域到“武汉市”3、在“特色服务”模块找到“(个人)武汉市社会保险公共服务平台”4、进入“(个人)武汉市社会保险公共服务平台”,登录账号密码<imgsrc="https://cdnstatic.hoscen.cn/blog/article/184053017752895488/img/497065960be44747825acb86a17483c1.png"style=
  • java中的注解@Generated用来标注源代码中的某些东西是由某些工具生成的,而不是人写的。这个注解可以用于:包、类、注解类、方法、构造方法、变量、本地变量、方法参数。
  • 如何使用postman模拟http发送xml参数报文的POST请求?1、postman工具通过安装软件或使用谷歌插件都可以,这里不再赘述。2、配置postman,选择POST,填写URL;切换到Headers,添加Content-Type:text/xml 3、切换到body,选择raw,XML,下方填写你的请求报文4、点击Send发送请求,如图可以看到响应状态、时间、结果等信息5、讲到这里就结束了,是不是学会了?快去试试吧!
  • 解决办法:是idea的加载有问题,关闭IDEA,在工程的根目录下删除.idea文件,重新打开IDEA加载就好了。
  • Failedtoloadprojectconfiguration:cannotparsefileF:/xx/.idea/modules.xml:ParseErrorat[row,col]:[1,1]Message:文件提前结束。解决办法:关闭idea,删掉这个文件,重新打开idea
  • 建立服务器内网其他IP端口的隧道,可以将远程的服务映射到本地进行访问。finalshell配置隧道方法:
  • 上传图片微服务网关报错:UT000054:Themaximumsize1048576foranindividualfileinamultipartrequestwasexceeded原因:所用容器对文件的限制一般项目用的是spring 对spring参数进行配置即可spring:servlet:multipart:#MultipartPropertiesmax-request-size:10MB#总文件大小max-file-size:10MB#单个文件大小注意如果是nginx代理配置限制,报错信息里面会标记nginx。届时需要设置nginx在server_name下加上client_max_body_size20m;
  • 目录:1、安装node.js环境2、安装cnpm3、安装vue-cli脚手架构建工具4、用vue-cli构建项目5、安装项目所需的依赖6、项目运行7、项目打包1、安装node.js环境下载地址:https://nodejs.org/zh-cn/安装过程没有太多好说的,安装完成后 win+R打开命令行输入node -v , 如图,出现版本号说明安装成功。npm包管理器是集成在node中的 , npm -v可以查看版本2、安装cnpm由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时
  • 控制台信息:Unabletostartthedaemonprocess.Thisproblemmightbecausedbyincorrectconfigurationofthedaemon.Forexample,anunrecognizedjvmoptionisused.PleaserefertotheUserManualchapteronthedaemonathttps://docs.gradle.org/6.3/userguide/gradle_daemon.htmlProcesscommandline:E:\DevelopTools\Java\OpenJDK8U-jdk_x86-32_windows_hotspot_8u282b08\jdk8u282-b08\bin\java.exe-XX:MaxHeapSize=1024m-Xms1024m-Xmx2048m-Dfile.encoding=UTF-8-Duser.country=CN-Duser.language=zh-Duser.variant-cpE:\DevelopTools\gradle-6.8.2-all\gradle_resp\wrapper\dists\gradle-6.3-bin\8tpu6egwsccjzp10c1jckl0rx\gradle-6.3\lib\gradle-launcher-6.3.jarorg.gradle.launcher.daemon.bootstrap.GradleDaemon6.3Pleasereadthefollowingprocessoutputtofindoutmore:-----------------------ErroroccurredduringinitializationofVMCouldnotreserveenoughspacefor2097152KBobjectheapPickedupJAVA_
  • 问题maven同一个版本号部署远程仓库,出现报错:Returncodeis: 400,ReasonPhrase:Repositorydoesnotallowupdatingassets:maven-releases. 解决maven在部署(deploy)时候抛的异常,存储库不允许更新资产,这个就是和私有maven库更新策略有关。具体设置步骤:1.访问私有库管理界面http://xxx.xxx.xxx.xxx:80812.登录管理员账号(默认:admin/admin123)3.进入设置界面->repository->repositories->maven-releases(自己需要部署的目标库)->setting->Deploymentpollcy(Allowredeploy)允许更新