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. 使用ffmpeg搭建HLS直播系统

    [时间:2018-04] [状态:Open] [关键词:流媒体,stream,HLS, ffmpeg,live,直播,点播, nginx, ssegment] 0 引言 本文作为HLS综述的后续文章. ...

  2. vlc-ts

    https://github.com/jiayayao/vlc_2.1.0-vs_2010 https://wenku.baidu.com/view/a0634d26336c1eb91a375d70. ...

  3. Java基础-多线程学习目录

    1.Java多线程并发编程一览笔录 2.什么时候使用CountDownLatch 3.Java并发学习系列-绪论

  4. mysql建立外键表

    //user create table users(id int primary key auto_increment not null,username varchar(50) not null,u ...

  5. tensorflow冻结变量方法（tensorflow freeze variable）

    最近由于项目需要,要对tensorflow构造的模型中部分变量冻结,然后继续训练,因此研究了一下tf中冻结变量的方法,目前找到三种,各有优缺点,记录如下: 1.名词解释 冻结变量,指的是在训练模型时, ...

  6. 织梦移动版页面点击下一篇获取不到id

    1.首先找到网站目录下面的/include/arc.archives.class.php文件 2.找到837行的如下内容 if ( defined('DEDEMOB') ) { $mlink = 'v ...

  7. [sqoop] sqoop 小试牛刀

    sqoop 1.4.6  小试牛刀 sqoop import 参数 1. mysql导入 到hdfs中 ./sqoop import --connect jdbc:mysql://mysql:3306 ...

  8. 使用Newtonsoft将DataTable转Json

    Newtonsoft提供的将DataTable转成Json: /// <summary> /// DataTable转Json /// </summary> /// <p ...

  9. Golang 笔记 5 go语句

     Go语句和通道类型是Go语言的并发编程理念的最终体现.与defer语句相同,go语句也可以携带一个表达式语句.Go语句的执行会很快结束,并不会对当前流程的进行造成阻塞或明显的延迟.一个简单的示例: ...

  10. 解决 nginx 出现 413 Request Entity Too Large 的问题

    1.若nginx用所用的 php 请求解析服务是 fpm, 则检查 /etc/php5/fpm/php.ini 文件中的参数 upload_max_filesize = 20M post_max_si ...