页面加载完之前显示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/ ...

随机推荐

如何在SpriteBuilder中设置对象的通用属性
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们知道在SpriteBuilder中可以为对象设置自定义类从 ...
android程序崩溃后重启
有时候由于测试不充分或者程序潜在的问题而导致程序异常崩溃,这个是令人无法接受的,在android中怎样捕获程序的异常崩溃,然后进行一些必要的处理或重新启动应用这个问题困恼了我很久,今天终于解决了该问 ...
Oracle使用游标为所有用户表添加主键语句
应用场合:数据表新增自增一主键能加快数据表的访问速度,而且是整形的索引速度最快.本程序适合在导入Oracle数据库时删除不存在主键的情况下运行. 代码说明:所有的表主键字段名都设置为ID,如果已存在I ...
我的第二个独立开发的邮箱类App—“简邮”（支持QQ、雅虎、阿里云、Outlook）
360手机市场地址: 360市场其它市场还在审核,囧... 为什么做这个App? 主要有两个原因 1.10月份正逢校招季,--当时和面试官介绍了这个APP 2.在苹果手机上看到一款内置的邮箱app支 ...
字符串的n位左旋
要求:将主串的某一段(n位)翻转到主串的最后,如:abcdef以2位翻转则结果为:cdefab.要求时间复杂度为O(n),空间复杂度为O(1) 思路一:可以重新定义一个与原串相同大小的字符数组resu ...
UNIX环境高级编程——信号
一.信号生命周期从信号发送到信号处理函数的执行完毕. 对于一个完整的信号生命周期(从信号发送到相应的处理函数执行完毕)来说,可以分为三个重要的阶段,这三个阶段由四个重要事件来刻画:信号诞生:信号在进 ...
UIViewController/ApplicationSequ…
UIViewController ApplicationSequence UI-03 注意: NSLog(@"%s %d",__FUNCTION__,__LINE__); // ...
html案例详解（一）
一.入门. <html>  <head> < ...
《java入门第一季》之面向对象（修饰符的概念和总结）
还是由于eclipde等ide的强大功能,会自动提示你修饰符是否可行.所以对修饰符的作用了解即可: 修饰符: 权限修饰符:private,默认的,protected,public ...
更新Cocos2D支持Xcode 7
原文链接(有节选简写) Apple已经释放出Xcode7,给我们带来了Swift2和每个平台的最新版本支持.Cocos2D却还在等待更新去兼容Apple的改变.不幸的是,SpriteBuilder还未 ...

页面加载完之前显示Loading

1.第一种方式

2.第二种方式

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

随机推荐

热门专题