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. The best manual of how to use "The easiest Xdebug" addon for Firefox

    Installation notes 0. Install the best Firefox add-on for remote debugging The easiest Xdebug. I'm n ...

  2. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  3. 全局Threshold和动态阈值分割Dyn_Threshold的应用场景

    手册里面的particle例子,例子的任务是分析颗粒在液体中.在这个应用程序的主要困难:存在两种类型的对象:大明亮物体和较低的小物体的对比.此外噪音使分割的存在困难:无法使用全局灰度阈值thresho ...

  4. 基数计数——HyperLogLog

    所谓的基数计数就是统计一组元素中不重复的元素的个数.如统计某个网站的UV,或者用户搜索网站的关键词数量:再如对一个网站分别统计了三天的UV,现在需要知道这三天的UV总量是多少,怎么融合多个统计值. 1 ...

  5. 框架源码系列十二：Mybatis源码之手写Mybatis

    一.需求分析 1.Mybatis是什么? 一个半自动化的orm框架(Object Relation Mapping). 2.Mybatis完成什么工作? 在面向对象编程中,我们操作的都是对象,Myba ...

  6. (原)kenel开机logo的制作

    今天项目需要,需要制作一个kernel的开机logo,所以在rk3288的平台上进行测试一番. 第一步:配置kernel:选上CONFIG_LOGO_LINUX_CLUT224选项 make menu ...

  7. 从一次线上故障思考Java问题定位思路

    问题出现:现网CPU飙高,Full GC告警 CGI 服务发布到现网后,现网机器出现了Full GC告警,同时CPU飙高99%.在优先恢复现网服务正常后,开始着手定位Full GC的问题.在现场只能够 ...

  8. Cookie的简单实用

    作用域: 一个域名下的所有网页共用一套cookie. 几个封装好的工具方法: // 添加一个cookie function setCookie(name, value, iDay) { var oDa ...

  9. docker应用-6（mysql+mycat 搭建数据库集群）

    上一节,通过使用overlay网络,搭建了跨主机的docker容器集群.下面,在这个跨主机的docker容器集群环境下,搭建mysql 数据库集群. mysql主从自动备份和自动切换 从数据安全性考虑 ...

  10. 如何写Emit代码

    写Emit代码也不是想象中的那么复杂,基本过程就是先手工写好C#代码,编译得到Exe或者Dll,然后用ILDASM或反编译工具,得到IL代码,最后就是看着IL代码,用Emit一个个对应发出代码,就行了 ...