css3 加载进度条动画

https://www.imooc.com/video/15273



1) 解决大部分进度条加载：

document.onreadystatechange  页面加载状态改变事件

document.redayState   当前文档的状态------其中：complete  载入完成

document.onreadystatechange = function (){

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

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

   }
}

2）CSS3进度条动画：

www.loading.io    CSS3动画网站 

SVG/CSS/GIF格式

autoprefixer.github.io     CSS3前缀兼容

css3进度条案例：

.loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#fff;

}

.loading .pic{width:50px; height:50px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;

}

.loading .pic i{

display:block;

float:left;

widht:6px;

height:50px;

background:#399;

margin: 0 2px;

transform: scaleY(0.4);

animation: load 1.2s infinite;

}

.loading .pic i:nth-child(2){animation-delay: 0.1s;}

.loading .pic i:nth-child(3){animation-delay: 0.2s;}

.loading .pic i:nth-child(4){animation-delay: 0.3s;}

.loading .pic i:nth-child(5){animation-delay: 0.4s;}

@keyframes load{

   0%,40%,100%{

   transform: scaleY(0.4);

   }<
4000
br />
   20%{

   transform: scaleY(1);

   }

}

3）定位在头部的进度条：

.loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#fff;

}

.loading .pic{width:0%; height:5px;position:absolute;top:0;left:0;background:#f33;

}

代码从上到下执行的顺序




<script>

$(".loading .pic").animate({wdith: "10%"}, 100)

</script>

<section><img src="xxx"/></section>

<script>

$(".loading .pic").animate({wdith: "30%"}, 100)

</script>

<section><img src="xxx"/></section>

<script>

$(".loading .pic").animate({wdith: "50%"}, 100)

</script>

<section><img src="xxx"/></section>

<script>

$(".loading .pic").animate({wdith: "70%"}, 100)

</script>

<section><img src="xxx"/></section>

<script>

$(".loading .pic").animate({wdith: "100%"}, 100， function () {

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

})

</script>

4）实时获取进度的进度条：

<div class="loading">

  <div class="pic">

    <span></s[an>

    <b>0%</b>

  </div>

</div>

*{margin:0; padding:0}

.loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#fff;

}

.loading .pic{width:100px; height:100px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;

font-size:30px; text-align:center; line-height:100px;

}

.loading .pic span{

display:block; widht:80pc; height:80px; position:absolute; top:10px; left:10px; border-radius:50%;

box-shadow: 0 3px 0 #666; -webkit-animation: rotate 1s infinite linear; animation: rotate 1s infinite linear;

}

@-webkit-keyframes rotate{

0%{-webkit-transform:rotate(0deg);}

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

}

@keyframes rotate{

0%{transform:rotate(0deg);}

100%{transform:rotate(360deg);}

}

var img = $("img");

var num =0;

img.each(function(){

  var oImg = new Imgae();

  oImg.onload=funciton(){

   oImg.onload=null;

    num++;

    $(".loading b").html(parseInt(num/$("img").size()*100)+"%");

     if(num >=i){

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

        }

  }

  oImg.src=img[i].src;

})

https://github.com/ConnorAtherton/loaders.css/



三个圆点依次变大小缩放css3动画

.showLoadMoreIcon{
height: 40px;
.loader-inner{
text-align: center;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
@-webkit-keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; }
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7; }
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }
@keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; }
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7; }
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }

.ball-pulse > div:nth-child(1) {
-webkit-animation: scale 3s -1.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 3s -1.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div:nth-child(2) {
-webkit-animation: scale 3s -0.75s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 3s -0.75s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div:nth-child(3) {
-webkit-animation: scale 3s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 3s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div {
background-color: #999999;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block; }
}

三个圆点依次变颜色css3动画，加载超时出现文字提示信息：

<div  class="showLoadMoreIcon"  v-if="showLoadMore">
<div class="loader-inner ball-pulse" v-if="showLoadMoreOk">
<div class="loadpoints loadpoints1"></div>
<div class="loadpoints loadpoints2"></div>
<div class="loadpoints loadpoints3"></div>
</div>
<div class="loader-inner" v-else>
<div class="loadpointserr" @click="search()">由于网络问题请<span style="color: #04c268;">重新加载</span>!</div>
</div>
</div>

.loader-inner{
text-align: center;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}

@-webkit-keyframes scale {
0% {
background-color: #04c268;
/*-webkit-transform: scale(1);
transform: scale(1);*/
opacity: 1; }
20% {
/*-webkit-transform: scale(1);
transform: scale(1);*/
opacity: 1; }
40% {
/*-webkit-transform: scale(0.1);
transform: scale(0.1);*/
opacity: 1; }
60% {
/*-webkit-transform: scale(1);
transform: scale(1);*/
opacity: 1; }
80% {
/*-webkit-transform: scale(1);
transform: scale(1);*/
opacity: 1; }
}
@keyframes scale {
0% {
background-color: #04c268;
/*-webkit-transform: scale(1);
transform: scale(1);*/
opacity: 1; }
20% {
/*-webkit-transform: scale(1);
transform: scale(1);*/
opacity: 1; }
40% {
/*-webkit-transform: scale(0.1);
transform: scale(0.1);*/
opacity: 1; }
60% {
/*-webkit-transform: scale(1);
transform: scale(1);*/
opacity: 1; }
80% {
/*-webkit-transform: scale(1);
transform: scale(1);*/
opacity: 1; }
}

.ball-pulse > .loadpoints1 {
-webkit-animation: scale 3s -1.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 3s -1.5s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > .loadpoints2 {
-webkit-animation: scale 3s -0.75s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 3s -0.75s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > .loadpoints3 {
-webkit-animation: scale 3s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 3s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > .loadpoints {
background-color: #999999;
width: 8px;
height: 8px;
border-radius: 100%;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block; }
}