页面加载完之前显示Loading

1.第一种方式

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

    left:;

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

    z-index:;

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

    z-index:;

}

.is-loading .loader {

    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);

    opacity:;

}

 window.onload=function(){

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

 }

2.第二种方式

HTML

<div id="loading">

    <i></i>

</div>

CSS

#loading{

  width: 100%;

  height: 100%;

  background-color: #fff;

  position: fixed;

  top:;

  left:;

  z-index:;

}

 #loading >i{

    width: 64px;

    height: 64px;

    position: absolute;

    top:;

    bottom:;

    left:;

    right:;

    margin: auto;

    background: url("/images/loading.gif") no-repeat;

  }

document.onreadystatechange = function () {

    if(document.readyState === "complete"){

        $("#loading").fadeOut();

    }

}

Loading图标网站：https://icons8.com/preloaders/

3.第三种方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>css3超炫loading加载特效</title>

<style>

.load1 {

  margin: 100px auto;

  width: 50px;

  height: 60px;

  text-align: center;

  font-size: 10px;

}

.load1 > div {

  background-color: #67CF22;

  height: 100%;

  width: 6px;

  display: inline-block;

  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;

  animation: stretchdelay 1.2s infinite ease-in-out;

}

.load1 .rect2 {

  -webkit-animation-delay: -1.1s;

  animation-delay: -1.1s;

}

.load1 .rect3 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

.load1 .rect4 {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}

.load1 .rect5 {

  -webkit-animation-delay: -0.8s;

  animation-delay: -0.8s;

}

@-webkit-keyframes stretchdelay {

  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

  20% { -webkit-transform: scaleY(1.0) }

}

@keyframes stretchdelay {

  0%, 40%, 100% {

    transform: scaleY(0.4);

    -webkit-transform: scaleY(0.4);

  }  20% {

    transform: scaleY(1.0);

    -webkit-transform: scaleY(1.0);

  }

}

.load2 {

  width: 60px;

  height: 60px;

  background-color: #67CF22;

  margin: 100px auto;

  -webkit-animation: rotateplane 1.2s infinite ease-in-out;

  animation: rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes rotateplane {

  0% { -webkit-transform: perspective(120px) }

  50% { -webkit-transform: perspective(120px) rotateY(180deg) }

  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }

}

@keyframes rotateplane {

  0% {

    transform: perspective(120px) rotateX(0deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

  } 50% {

    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

  } 100% {

    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

  }

}

.load3 {

  width: 60px;

  height: 60px;

  position: relative;

  margin: 100px auto;

}

.double-bounce1, .double-bounce2 {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background-color: #67CF22;

  opacity: 0.6;

  position: absolute;

  top: 0;

  left: 0;

  -webkit-animation: bounce 2.0s infinite ease-in-out;

  animation: bounce 2.0s infinite ease-in-out;

}

.double-bounce2 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

@-webkit-keyframes bounce {

  0%, 100% { -webkit-transform: scale(0.0) }

  50% { -webkit-transform: scale(1.0) }

}

@keyframes bounce {

  0%, 100% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 50% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

.load4 {

  margin: 100px auto;

  width: 32px;

  height: 32px;

  position: relative;

}

.cube1, .cube2 {

  background-color: #67CF22;

  width: 30px;

  height: 30px;

  position: absolute;

  top: 0;

  left: 0;

  -webkit-animation: cubemove 1.8s infinite ease-in-out;

  animation: cubemove 1.8s infinite ease-in-out;

}

.cube2 {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}

@-webkit-keyframes cubemove {

  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }

  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }

  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }

  100% { -webkit-transform: rotate(-360deg) }

}

@keyframes cubemove {

  25% {

    transform: translateX(42px) rotate(-90deg) scale(0.5);

    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);

  } 50% {

    transform: translateX(42px) translateY(42px) rotate(-179deg);

    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);

  } 50.1% {

    transform: translateX(42px) translateY(42px) rotate(-180deg);

    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

  } 75% {

    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

  } 100% {

    transform: rotate(-360deg);

    -webkit-transform: rotate(-360deg);

  }

}

.load5 {

  margin: 100px auto;

  width: 90px;

  height: 90px;

  position: relative;

  text-align: center;

  -webkit-animation: rotate 2.0s infinite linear;

  animation: rotate 2.0s infinite linear;

}

.dot1, .dot2 {

  width: 60%;

  height: 60%;

  display: inline-block;

  position: absolute;

  top: 0;

  background-color: #67CF22;

  border-radius: 100%;

  -webkit-animation: bounce 2.0s infinite ease-in-out;

  animation: bounce 2.0s infinite ease-in-out;

}

.dot2 {

  top: auto;

  bottom: 0px;

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}

@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes bounce {

  0%, 100% { -webkit-transform: scale(0.0) }

  50% { -webkit-transform: scale(1.0) }

}

@keyframes bounce {

  0%, 100% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 50% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

.load6 {

  margin: 100px auto 0;

  width: 150px;

  text-align: center;

}

.load6 > div {

  width: 30px;

  height: 30px;

  background-color: #67CF22;

  border-radius: 100%;

  display: inline-block;

  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;

  animation: bouncedelay 1.4s infinite ease-in-out;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

.load6 .bounce1 {

  -webkit-animation-delay: -0.32s;

  animation-delay: -0.32s;

}

.load6 .bounce2 {

  -webkit-animation-delay: -0.16s;

  animation-delay: -0.16s;

}

@-webkit-keyframes bouncedelay {

  0%, 80%, 100% { -webkit-transform: scale(0.0) }

  40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

  0%, 80%, 100% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 40% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

.load7 {

  width: 40px;

  height: 40px;

  margin: 100px auto;

  background-color: #333;

  border-radius: 100%;

  -webkit-animation: scaleout 1.0s infinite ease-in-out;

  animation: scaleout 1.0s infinite ease-in-out;

}

@-webkit-keyframes scaleout {

  0% { -webkit-transform: scale(0.0) }

  100% {

    -webkit-transform: scale(1.0);

    opacity: 0;

  }

}

@keyframes scaleout {

  0% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 100% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

    opacity: 0;

  }

}

.load8 {

  margin: 100px auto;

  width: 20px;

  height: 20px;

  position: relative;

}

.container1 > div, .container2 > div, .container3 > div {

  width: 6px;

  height: 6px;

  background-color: #333;

  border-radius: 100%;

  position: absolute;

  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;

  animation: bouncedelay 1.2s infinite ease-in-out;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

.load8 .load8-container {

  position: absolute;

  width: 100%;

  height: 100%;

}

.container2 {

  -webkit-transform: rotateZ(45deg);

  transform: rotateZ(45deg);

}

.container3 {

  -webkit-transform: rotateZ(90deg);

  transform: rotateZ(90deg);

}

.circle1 { top: 0; left: 0; }

.circle2 { top: 0; right: 0; }

.circle3 { right: 0; bottom: 0; }

.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {

  -webkit-animation-delay: -1.1s;

  animation-delay: -1.1s;

}

.container3 .circle1 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

.container1 .circle2 {

  -webkit-animation-delay: -0.9s;

  animation-delay: -0.9s;

}

.container2 .circle2 {

  -webkit-animation-delay: -0.8s;

  animation-delay: -0.8s;

}

.container3 .circle2 {

  -webkit-animation-delay: -0.7s;

  animation-delay: -0.7s;

}

.container1 .circle3 {

  -webkit-animation-delay: -0.6s;

  animation-delay: -0.6s;

}

.container2 .circle3 {

  -webkit-animation-delay: -0.5s;

  animation-delay: -0.5s;

}

.container3 .circle3 {

  -webkit-animation-delay: -0.4s;

  animation-delay: -0.4s;

}

.container1 .circle4 {

  -webkit-animation-delay: -0.3s;

  animation-delay: -0.3s;

}

.container2 .circle4 {

  -webkit-animation-delay: -0.2s;

  animation-delay: -0.2s;

}

.container3 .circle4 {

  -webkit-animation-delay: -0.1s;

  animation-delay: -0.1s;

}

@-webkit-keyframes bouncedelay {

  0%, 80%, 100% { -webkit-transform: scale(0.0) }

  40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

  0%, 80%, 100% {

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 40% {

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

</style>

</head>

<body>

<div class="load1">

  <div class="rect1"></div>

  <div class="rect2"></div>

  <div class="rect3"></div>

  <div class="rect4"></div>

  <div class="rect5"></div>

</div>

<div class="load2"></div>

<div class="load3">

  <div class="double-bounce1"></div>

  <div class="double-bounce2"></div>

</div>

<div class="load4">

  <div class="cube1"></div>

  <div class="cube2"></div>

</div>

<div class="load5">

  <div class="dot1"></div>

  <div class="dot2"></div>

</div>

<div class="load6">

  <div class="bounce1"></div>

  <div class="bounce2"></div>

  <div class="bounce3"></div>

</div>

<div class="load7"></div>

<div class="load8">

  <div class="load8-container container1">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

  <div class="load8-container container2">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

  <div class="load8-container container3">

    <div class="circle1"></div>

    <div class="circle2"></div>

    <div class="circle3"></div>

    <div class="circle4"></div>

  </div>

</div>

</body>

</html>

其他待更新！

页面加载完之前显示Loading的更多相关文章

在页面未加载完之前显示loading动画
在页面未加载完之前显示loading动画这里有很多比这篇博客还优秀的loading动画源码我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html&g ...
css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失
一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...
javascript 实现页面加载完再显示页面
document.onreadystatechange = function () { if (document.readyState == "complete") { docum ...
当vue 页面加载数据时显示加载loading
参考:https://www.jianshu.com/p/104bbb01b222 Vue 页面加载数据之前增加 `loading` 动画创建组件 1.新建 .vue 文件: src -> c ...
js页面加载完后执行（document.onreadystatechange 和 document.readyState）
js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...
javascript 实现页面加载完的操作
document.onreadystatechange = function () { if (document.readyState == "complete") {//页面加载 ...
vue项目未加载完成前显示loading...
1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...
关于第三方接口支付的时候采用post提交的方式，有两种一种是通过 curl来进行，一种是通过js当页面加载完后跳转
这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给第三方接口----- echo <<<_END<!DOCTYPE html PUBLIC &q ...
页面加载完之后在执行js代码
把代码写在 window.onload = function () { //js代码 //此处js代码是页面完全加载完之后执行 } 即可. 例: <script type="text/ ...

随机推荐

2.3、Android Studio使用Layout Editor设计UI
Android Studio提供了一个高级的布局编辑器,允许你拖拽控件,在编辑XML之后可以实时预览. 在布局编辑器中,你在文字视图和设计视图直接来回切换. 在文字视图中编辑你可以在文字视图中编辑你 ...
<<精通iOS开发>>第14章例子代码小缺陷的修复
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 首先推荐大家看这本书,整本书逻辑非常清晰,代码如何从无到有,到 ...
Android四大组件之一Service介绍-android学习之旅（十二）
基本概念: service是android四大组件之一,运行在后台执行耗时操作,并不提供用户界面.其他组件如acticity可以通过startService启动该组件,也可以通过bindService ...
Java-IO之PipedReader和PipedWriter
PipedReader和PipedWriter与PipedInputStream和PipedOutputStream一样,都可以用于管道通信.PipedWriter是字符管道输出流,继承于Writer ...
Common Bit Tasks
1) If you XOR a bit with its own negated value, you will always get 1. Therefore thesolution to a ^ ...
js对象、构造函数、命名空间、方法、属性
<script language="javascript"> var myNameSpace = new Object(); //构造一个命名空间myCla ...
UNIX环境高级编程——信号
一.信号生命周期从信号发送到信号处理函数的执行完毕. 对于一个完整的信号生命周期(从信号发送到相应的处理函数执行完毕)来说,可以分为三个重要的阶段,这三个阶段由四个重要事件来刻画:信号诞生:信号在进 ...
AngularJS进阶(三十九)基于项目实战解析ng启动加载过程
基于项目实战解析ng启动加载过程前言在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...
React Native控件只TextInput
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.本组件的属性提供了多种特性的配置,譬如自动完成.自动大小写.占位文字,以及多种不同的键盘类型(如纯数字键盘)等等. 比如官网最简单的 ...
ubuntu14下mysql忘记密码的处理
ubuntu14下mysql忘记密码的处理 ubuntu14.04忘记了mysql的用户(root)的密码.接下来: 1) 停止mysql服务 $ sudo stop mysql 2) 启动mysql ...

页面加载完之前显示Loading

1.第一种方式

2.第二种方式

页面加载完之前显示Loading的更多相关文章

随机推荐

热门专题