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

小郝不负流年
小郝不负流年   + 关注
2020-12-26 09:00:00   阅读542   评论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=
  • 如何使用postman模拟http发送xml参数报文的POST请求?1、postman工具通过安装软件或使用谷歌插件都可以,这里不再赘述。2、配置postman,选择POST,填写URL;切换到Headers,添加Content-Type:text/xml 3、切换到body,选择raw,XML,下方填写你的请求报文4、点击Send发送请求,如图可以看到响应状态、时间、结果等信息5、讲到这里就结束了,是不是学会了?快去试试吧!
  • Failedtoloadprojectconfiguration:cannotparsefileF:/xx/.idea/modules.xml:ParseErrorat[row,col]:[1,1]Message:文件提前结束。解决办法:关闭idea,删掉这个文件,重新打开idea
  • 目录: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安装依赖包的时
  • 下载地址:https://adoptopenjdk.net/releases.html?variant=openjdk8&jvmVariant=hotspot选择文件类型:或者,你可以通过我的百度网盘分享直接获取:链接:https://pan.baidu.com/s/1UygOdTh6WNZyS5WP_API6w 提取码:phnh 注意:我这里是下载的32的jdk,你们如果要64位请下载64的。使用:使用上和OracleJDK使用上是没有区别的。区别:1.OracleJDK⼤概每6个⽉发⼀次主要版本,⽽OpenJDK版本⼤概每三个⽉发布⼀次。但这不是固定的,我觉得了解这个没啥⽤处。详情参⻅:https://blogs.oracle.com/java-platform-group/update-and-faq-on-the-java-se-release-cadence。 2.OpenJDK是⼀个参考模型并且是完全开源的,⽽OracleJDK是OpenJDK的⼀个实现,并不是完全开源的; 3.OracleJDK⽐OpenJDK更稳定。OpenJDK和OracleJDK的代码⼏乎相同,但OracleJDK有更多的类和⼀些错误修复。因此,如果您
  • 很多时候我们需要Linux服务器定时去运行一个脚本来触发一个操作,比如写缓存数据到硬盘、定时备份、定时重启服务、定期清除日志等。下面就简单讲解一下Linuxcrontab命令如何实现自动循环执行shell脚本。一、准备shell脚本比如我们准备一个hello.shvim/hcn/sh/hello.sh#!/bin/bash  DATETIME=$(date"+%Y%m%d%H%M%S") echo"hello, www.hoscen.cn,时间:${DATETIME}"  通过chmod命令赋予该脚本的执行权限chmod755hello.sh测试正确性二、开启crontab服务 linux应该都有crontab,没有的话可以安装一下:yuminstall vixie-cronyuminstall crontabsvixie-cron软
  • 本文讲触发el-dialog前动态修改窗口title的方法。1、el-dialog添加title属性el-dialog :title="titleType+'菜单'" :visible.sync="dialogVisible" width="800px" >el-dialog>  2、初始化变量(titleType,名称自己定义)export&
  • 建立服务器内网其他IP端口的隧道,可以将远程的服务映射到本地进行访问。finalshell配置隧道方法:
  • 一般我们在使用CDN时都设置有缓存时间,当源站资源发生变更后,如果缓存时间没到,那么用户访问的依旧是变更前的数据,虽说又拍云控制台提供了缓存刷新功能界面,但是每次都手动去刷新显示不太理想,当然又拍云也想到了这一点,提供给我们有API可以调用。本篇文章就是讲解如何接入又拍云缓存刷新API。网站免费接入又拍云CDN的方法,请查看我另外一篇文章,地址: https://www.hoscen.cn/blog/hao/articles/204022774975430656.html又拍云API文档:https://api.upyun.com/doc#/api/guide/overview看完文档,我们会知道又拍云提供有两个缓存刷新接口,一个支持通配符(但次数有限),一个是完整url刷新。同时注意调用接口时将 Token 放入 HTTP Header 中 。那么我们需要3个接口:1、获取token2、URL刷新3、缓存批量刷新详细请求参数和响应值请查看文档。话不多说,我们直接放上核心代码1、获取token2、URL刷新<img src="https://cdnstatic.hoscen.cn/blog/article/
  • SQL计算日期相差多少分钟,示例SELECT  ROUND(TO_NUMBER(to_date(rs.t_cap_wf_finReq_start_date,'YYYY/MM/DDhh24:mi:ss')-to_date(rs.t_cap_wf_start_date,'YYYY/MM/DDhh24:mi:ss'))*24*60) FROM table_xxx 更多差值单位写法天:ROUND(TO_NUMBER(END_DATE-START_DATE))小时:ROUND(TO_NUMBER(END_DATE-START_DATE)*24)分钟:ROUND(TO_NUMBER(END_DATE-START_DATE)*24*60)秒:ROUND(TO_NUMBER(END_DATE-START_DATE)*24*60*60)毫秒:ROUND(TO_NUMBER(END_DATE-START_DATE)*24*60*60*1000)