Html

 <body  class="is-loading">

 <div class="curtain">

     <div class="loader">

         loading...

     </div>

 </div>

  <div>

    <!--这里 正文 -->

 </div>

 </body>

Css

 .loader {

     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 {

     position: fixed;

     width: 100%;

     height: 100%;

     top: 0;

     left: 0;

     background-color: white;

     -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;

 }

Js

  window.onload=function(){

      $('body').removeClass('is-loading');

  }

使用JavaScript实现在页面上所有内容加载完之前一直显示loading...页面的更多相关文章

  1. 在iframe内页面完全加载完后，关闭父页面生成的div遮罩层

    遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数 此段代码在iframe页面内: <script> ...

  2. 如何自动加载scratch3.0的页面上实现自动加载原有的作品

    首先,我们在安装scratch3.0后,浏览器默认打开的是编程的页面.如下图: 那么我们希望开发一个功能,就是打开的时候默认加入某一个SB3的开发文件 1.首先,我们需要有一个.SB3的开发文件,建议 ...

  3. 页面滚动动态加载数据，页面下拉自动加载内容 jquery

    <!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...

  4. Jquery页面滚动动态加载数据，页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

  5. “Word自动更改后的内容保存到通用文档模板上。是否加载该模板？“的解决办法

    在win7系统下,Word2010出现了不能正常关闭.打开一个已有word文档,点击右上角关闭按钮后,先提示"word已停止工作,windows正在检查该问题的解决方案",随后提示 ...

  6. 图片全部加载完成之后再显示页面ui，公司项目里用上，自己写的几行代码

    说明: -----onload事件   这里我并没有考虑ie的兼容性 因为项目是移动端的: -----求大神指正~ -----自己测试正常 页面没加载完之前会有一个提示 /************** ...

  7. javascript 实现页面加载完的操作

    document.onreadystatechange = function () { if (document.readyState == "complete") {//页面加载 ...

  8. jquery实现滚动到页面底部时无限加载内容的代码

    var p="{$other.p}"; if(p=="") p=1; var stop=true;//触发开关,防止多次调用事件 $(window).scrol ...

  9. webpack多页面开发与懒加载hash解决方案

    之前讨论了webpack的hash与chunkhash的区别以及各自的应用场景,如果是常规单页面应用的话,上篇文章提供的方案是没有问题的.但是前端项目复杂多变,应对复杂多页面项目时,我们不得不继续踩w ...

随机推荐

  1. 【转】Mac OS X 上修改主机名

    修改主机名称 sudo scutil --set HostName MacBookPro 修改共享名称 sudo scutil --set ComputerName MacBookPro [转自]:h ...

  2. 北京Java笔试题整理

    北京Java笔试题整理 1.什么是java虚拟机?为什么ava被称作是"平台无关的编程语言? 答:Java虚拟机可以理解为一个特殊的"操作系统",只是它连接的不是硬件,而 ...

  3. Java对象序列化全面总结

    前言 Java允许我们在内存中创建可复用的Java对象,但一般情况下,这些对象的生命周期不会比JVM的生命周期更长.但在现实应用中,可能要求在JVM停止运行之后能够保存(持久化)指定的对象,并在将来重 ...

  4. 关于Unity中物体分别在本地和世界坐标系对应方向的移动

    方向 Vector3可以定义以世界坐标轴为参考的三维矢量,Vector3.forward,Vector3.up,Vector3.right方别对应物体世界坐标系的Z,Y,X轴方向的单位向量,或者叫三维 ...

  5. [原创] 如何PCB通流能力计算

    一.计算方法如下: 先计算Track的截面积,大部分PCB的铜箔厚度为35um(不确定的话可以问PCB厂家)它乘上线宽就是截面积,注意换算成平方毫米. 有一个电流密度经验值,为15~25安培/平方毫米 ...

  6. TPS和QPS的区别和理解

    QPS:Queries Per Second意思是“每秒查询率”,是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准. TPS:是Transactions ...

  7. php7新特性总结

    PHP新功能总结 改进的性能 - 将PHPNG代码合并到PHP7中,速度是PHP 5的两倍. 降低内存消耗 - 优化的PHP 7使用较少的资源. 标量类型声明 - 现在可以强制执行参数和返回类型. 一 ...

  8. sbt spark2.3.1 idea打包Caused by: java.lang.ClassNotFoundException: scala.Product$class

    今天同事在服务区上面装的是最新版本的hadoop3.10和spark2.3.1,因为用scala开发, 所以我想用sbt进行开发.过程中遇到各种坑,刚开始用的jdk10,结果也报错,后来改成jdk1. ...

  9. 使用100%面向过程的思维方式来写java程序

    1.java是强制写class关键字的语言,不能有独立的函数游离在类外出现在文件中,这和python c++ 都不同,后面的都可以单独在类外写函数,所以java被称为是纯面向对象的语言,py和c++都 ...

  10. store.state

    https://blog.csdn.net/qq_38658567/article/details/82847758