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. Asp.Net Newtonsoft.Json使用教程

    json序列化和反序列化的使用教程 实体 public class wendaModel { private string _title; private string _cons; public s ...

  2. AOSP中的HLS协议解析

    [时间:2018-04] [状态:Open] [关键词:流媒体,stream,HLS, AOSP, 源码分析,HttpLiveSource, LiveSession,PlaylistFetcher] ...

  3. Excel公式与函数——每天学一个

    说明(2018-5-29 20:35:53): 1. 根据刘伟的视频讲解进行总结,网上讲Excel公式与函数的貌似就他讲的还不错.在他的微博里看到现在的照片胖了不少,不过还挺帅的,不再是以前那个小屌丝 ...

  4. vscode打造最佳的markdown编辑器

    参考:https://www.jianshu.com/p/18876655b452 在macos下也设置成功:

  5. ORACLE拼日期

    Oracle数据库拼字符串是用"||"连接的.在开发中,经常会用到时间范围的查询 例如  startTime >='2017-05-22 00:00:00' and endT ...

  6. Android全面屏适配

    什么是全面屏 概念 很多人可能把全面屏跟曲面屏混淆,其实这是两个不同的概念. 一般手机的屏幕纵横比为16:9,如1080x1920.1440x2560等,其比值为1.777777……,全面屏手机出现之 ...

  7. springboot-custom starter

    Spring Boot由众多Starter组成,随着版本的推移Starter家族成员也与日俱增.在传统Maven项目中通常将一些层.组件拆分为模块来管理, 以便相互依赖复用,在Spring Boot项 ...

  8. 关于c++中前++后++运算符重载问题

    #include<iostream> using namespace std; class Complex{ public: Complex(int a,int b){ this-> ...

  9. ShellExecute 使用

    shellExecute 函数原型及参数含义: function ShellExecute(hWnd:HWND;Operation,FileName,Parameters,Directory:PCha ...

  10. word-break和word-wrap的使用和区别

    问题起源: 中文是一个字就是一个单词,而英文字母要有一个空格才将他们分割为一个单词:文字换行没事,主要是英文 <!DOCTYPE html> <html> <head&g ...