1:當圖片加載完後loading消失
HTML
<div class="loading">
<div class="picc">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="img">
<img src="img\7640717475412ec189396ea6c73a66921548819501.jpg"/>
<img src="img\7b5085f583e732a0c5de3ef183f5e6811553155542.jpg"/>
<img src="img\25a81eee1ea53311c4947c82c091a09e1551845761.jpg"/>
</div>
jq:
document.onreadystatechange=function(){
if(document.readyState=="complete"){
$(".loading").fadeOut()
}
}
總css
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.loading {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99;
background:#FFF;
}
.piccc {
width:0%;
height:3px;
background:brown;
position:absolute;
top:0;
left:0;
}
.loading .loads>span {
width:80px;
height:80px;
border-radius:50%;
display:block;
position:absolute;
top:10px;
left:10px;
-webkit-box-shadow:0 3px 2px #F00;
box-shadow:0 3px 2px #F00;
-webkit-animation:loads 2s infinite linear;
animation:loads 2s infinite linear;
}
@-webkit-keyframes loads{
0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes loads{
0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
.loading .loads {
width:100px;
height:100px;
font-size:24px;
line-height:100px;
text-align:center;
color:#000;
}
.picc {
width:40px;
height:50px;
}
.picc,.pic,.loads {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
.pic {
background:url(../img/8da4edc6c8295738442eb4167fd028660ca7b3d55ac74-qKkl85_fw658.gif) no-repeat;
background-size:300px 200px;
width:300px;
height:200px;
}
.img {
width:100%;
height:auto;
overflow:hidden;
}
.img img {
width:100%;
height:auto;
}
.loading .picc>i {
width:5px;
height:50px;
display:block;
float:left;
background:brown;
-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-animation:load 2s infinite;
animation:load 2s infinite;
margin-right:2px;
}
.loading .picc>i:nth-child(2) {
-webkit-animation-delay: .1s;
animation-delay: .1s;
}
.loading .picc>i:nth-child(3) {
-webkit-animation-delay: .2s;
animation-delay: .2s;
}
.loading .picc>i:nth-child(4) {
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
.loading .picc>i:nth-child(5) {
-webkit-animation-delay: .4s;
animation-delay: .4s;
}
@-webkit-keyframes load{
0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}
@keyframes load{
0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
}
栗子二:圖片gif的loading進度條(css見上面)
HTML:
<div class="img">
<img src="img\7640717475412ec189396ea6c73a66921548819501.jpg"/>
<img src="img\7b5085f583e732a0c5de3ef183f5e6811553155542.jpg"/>
<img src="img\25a81eee1ea53311c4947c82c091a09e1551845761.jpg"/>
</div>
jq
$(function(){
var loading='<div class="loading"><div class="pic"></div></div>'
$("body").append(loading);
setInterval(function(){
$(".loading").fadeOut()
},3000)
})
栗子三:数字加载loading
HTML:
<div class="loading">
<div class="loads">
<span></span>
<b>0%</b>
</div>
</div>
<div class="img">
<img src="img\7640717475412ec189396ea6c73a66921548819501.jpg"/>
<img src="img\7b5085f583e732a0c5de3ef183f5e6811553155542.jpg"/>
<img src="img\25a81eee1ea53311c4947c82c091a09e1551845761.jpg"/>
</div>
jq
$(function(){
var img = $("img");
var num=0;
img.each(function(i){
var oImg = new Image();
oImg.onload = function(){
oImg.onload = null;
num++;
$(".loading .loads b").html(parseInt(num/$("img").size()*100)+"%");
if(num>=i){
$(".loading").fadeOut();
}
}
oImg.src=img[i].src;
})
})
例子四:顶部一条线加载
<div class="loading"><div class="piccc"></div></div>
<header>
<img src="http://www.cbecm.com/Public/img/Guide/guidebanner3.jpg"/>
</header>
<script>
$(".loading .piccc").animate({width:"10%"},100)
</script>
<section class="art">
<img src="http://www.cbecm.com/Public/img/Home/new/newbanner.jpg"/>
</section>
<script>
$(".loading .piccc").animate({width:"20%"},200)
</script>
<section class="aside">
<img src="http://www.cbecm.com/Public/img/News/active.jpg"/>
</section>
<script>
$(".loading .piccc").animate({width:"30%"},200)
</script>
<section class="one">
<img src="http://www.cbecm.com/Public/img/News/huodong.jpg"/>
</section>
<script>
$(".loading .piccc").animate({width:"40%"},200)
</script>
<section class="two">
<img src="http://www.cbecm.com/Public/img/News/fenxi.jpg"/>
</section>
<script>
$(".loading .piccc").animate({width:"50%"},200)
</script>
<section class="thr">
<img src="http://www.cbecm.com/Public/img/News/saishi.jpg"/>
<img src="http://www.cbecm.com/Public/img/News/gongnue.jpg"/>
</section>
<script>
$(".loading .piccc").animate({width:"70%"},200)
</script>
<footer>
<img src="http://www.cbecm.com/Public/img/News/game.jpg"/>
<img src="http://www.cbecm.com/Public/img/Anchor/hd-banner.jpg"/>
<img src="http://www.cbecm.com/Public/img/Anchor/hd-banner.jpg"/>
</footer>
<script>
$(".loading .piccc").animate({width:"100%"},200,function(){
$(".loading").fadeOut();
})
</script>