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. yml 后面的配置覆盖前面的

    事情是这样的: a: b: c: tomcat d: hoho # 中间还隔了好多 a: b: c: tomcat 这种情况下,后面的配置会覆盖前面的所有配置,即 a.d = hoho 也会被覆盖 y ...

  2. Python 词典增加和删除

    增加 dict 里面的属性,必须先初始化 key,然后使用 append 添加值 #!/usr/bin/python3 message = dict() #message = { # "10 ...

  3. kernel事件通知userspace

    https://stackoverflow.com/questions/31646466/how-to-send-signal-from-kernel-to-user-space

  4. MySQL 加锁处理分析<转>

    1    背景    1 1.1    MVCC:Snapshot Read vs Current Read    2 1.2    Cluster Index:聚簇索引    3 1.3    2P ...

  5. MySQL 下载地址获取

    http://cdn.mysql.com/Downloads/MySQL-5.7/mysql-5.7.26-winx64.msi 首先安装 mysql installer 安装器进行安装,之前会让你选 ...

  6. mybatis-generator 自动生成查询Vo

    package com.witwicky.plugins; import org.mybatis.generator.api.GeneratedJavaFile; import org.mybatis ...

  7. mysql事务隔离级别及传播机制

    TRANSACTION(事务隔离级别) 在说明事务隔离级别之前先说一下脏读.不可重复读.幻读这三个概念. 脏读:一个事务读取到另一事务未提交的更新新据.当一个事务正在访问数据,并且对数据进行了修改,而 ...

  8. TPS和QPS的区别和理解

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

  9. centos7 yum安装ffmpeg，以及ffmpeg的简单用法

    yum install ffmpeg: 安装EPEL Release,因为安装需要使用其他的repo源,所以需要EPEL支持: yum install -y epel-release #如果出现缺少C ...

  10. u3d内嵌H5游戏 设置cookie

    Intent intent1 = getIntent(); Log.d("SS", "onCreate: "); String data = intent1.g ...