加载页面增加一个loading

心已赠人 2022-05-19 00:40 293阅读 0赞

1.设置css(如果写入css文件,就要在html引入css)

<style> .loader { //这个注解会影响到页面中<a>和<button>的点击事件 position: fixed; left: 50%; top: 50%; margin: -0.2em 0 0 -0.2em; text-indent: -9999em; border-top: 0.3em solid rgba(0, 0, 0, 0.1); border-right: 0.3em solid rgba(0, 0, 0, 0.1); border-bottom: 0.3em solid rgba(0, 0, 0, 0.1); border-left: 0.3em solid #555; -moz-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-animation: loader 300ms infinite linear; -webkit-animation: loader 300ms infinite linear; animation: loader 300ms infinite linear; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .loader, .loader:after { border-radius: 50%; width: 2em; height: 2em; } .curtain { //这个注解会影响到页面中<a>和<button>的点击事件 position: fixed; width: 100%; height: 100%; top: 0; left: 0; //注意-->这个地方的图片是一个半透明图片--->后面会给大家 background-image: url(../image/IMG20180718112933.png); -moz-transition: all 600ms ease; -o-transition: all 600ms ease; -webkit-transition: all 600ms ease; transition: all 600ms ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; z-index: 0; overflow: hidden; } @-webkit-keyframes loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes loader { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .is-loading { overflow: hidden; } .is-loading .curtain { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; z-index: 99; } .is-loading .loader { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; } </style>

2,给body增加class

<body  class="is-loading">

3.body下放入下面这个标签

<div id="mycurtain" >
        <div id="myloader" >
        </div>
    </div>

4.js加入移除loading效果

window.onload=function(){ 
        $("body").addClass("is-loading")
        $("#mycurtain").addClass("curtain")
        $("#myloader").addClass("loader")
    
        $('body').removeClass('is-loading');
        $("#mycurtain").removeClass("curtain")
        $("#myloader").removeClass("loader") 
      }

5.效果如下  
![这里写图片描述][70]

[半透明图片下载][Link 1]  
如若没有积分,回复邮箱,发给你们

[70]: /images/20220519/c837ff159ae24a1d9c512e616f30c2d7.png
[Link 1]: https://download.csdn.net/download/shawemou/10548427

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关懒加载(Lazy Loading) - MyBatis懒加载 - Spring懒加载

文章目录懒加载(Lazy Loading) MyBatis中懒加载的使用 Spring中懒加载的使用懒加载(

Dear 丶/ 2022年12月10日 15:53/ 0 赞/ 431 阅读

相关 JVM Loading 加载阶段

一加载完成的操作 1 加载的理解所谓加载，简而言之就是将类的字节码文件加载到机器内存中，并在内存中构建出类的原型——类模板对象。所谓类模板对象，其实就是 Jav

蔚落/ 2022年09月04日 13:54/ 0 赞/ 154 阅读

相关利用Jquery的load函数实现页面的动态加载

　　js的强大功能相信大家都知晓，今天通过jquery的库函数load可以更加方便的实现页面的动态刷新，经过几天的研究与探索，终于有所成效！吾心甚蔚！　　一、基本语法为：

迷南。/ 2022年06月05日 08:05/ 0 赞/ 279 阅读

相关 jQuery的load方法设计动态加载及解决被加载页面js

> 上面提了下jQuery的load方法，感觉这需要记录下： jQuery load()方式是一个简单强大的ajax方法。 > load()从服务器获取数据，并把返

布满荆棘的人生/ 2022年06月02日 22:53/ 0 赞/ 396 阅读

相关加载页面增加一个loading

1.设置css(如果写入css文件,就要在html引入css) <style> .loader { //这个注解会影响到页面中<a>和<button>的点击事件 po

心已赠人/ 2022年05月19日 00:40/ 0 赞/ 294 阅读

相关 JS实现页面加载完毕之前loading提示效果

引用：http://qubernet.blog.163.com/blog/static/1779472842014510392573/ 做成js调用： ![Center][

亦凉/ 2022年05月12日 01:04/ 0 赞/ 233 阅读

相关 Notice-loading加载

实际使用：v-loading为true时，会出现白色遮屏效果。贷款产品管理列表页中（loan.vue）：v-loading绑定到整个div中。 a、默认初始require

系统管理员/ 2022年03月30日 09:42/ 0 赞/ 208 阅读

相关利用Jquery的load函数实现页面的动态加载

js的强大功能相信大家都知晓，今天通过jquery的库函数load可以更加方便的实现页面的动态刷新，经过几天的研究与探索，终于有所成效！吾心甚蔚！一、基本语法为

た入场券/ 2022年03月12日 05:09/ 0 赞/ 355 阅读

相关 vue图片加载完成前增加loading效果

这次给大家带来vue[图片][Link 1]加载完成前增加loading效果，vue图片加载完成前增加loading效果的[注意事项][Link 2]有哪些，下面就是实战案例，

小灰灰/ 2022年02月04日 14:27/ 0 赞/ 985 阅读

相关 vue静态页面加载之前loading

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

布满荆棘的人生/ 2021年07月26日 12:37/ 1 赞/ 899 阅读