进度条总结

preloaders.net  :  在线生成gif图标

www.loading.io ：   在线生成进度条动画

www.autoprefixer.io  ：在线生成兼容性代码

1 定时器的进度条

<div class="loading>

    <div class ="pic"></div>

</div>

img>*

<style>

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

.loading .pic{width:64px; height:64px;border:1px solid red;background:url('images/loading.jig'); positon:absolute;top:0;left:0;margin:0 auto;}

</style>

<script>

$(function(){

//var loading = '<div class="loading><div class ="pic"></div></div>'

//$('body').append(loading);

    setInterval(function(){

    $('.loading').fadeout();

},3000)

})

</script>

2.通过加载状态时间制作进度条

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

document.readyState     返回当前文档的状态 

uninitialized  还未开始载入

loading   载入中

interactive    已加载  ，文档与用户可以开始交互

complete    载入完成

document.onreadystatechange = function(){

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

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

}

}

3.css3进度条小动画

    <div class="loading">

        <div class="pic">

            <i></i>

            <i></i>

            <i></i>

            <i></i>

             <i></i>

        </div>        

    </div>

img>*

.loading .pic i{display:block; float:left; width:5px; height:30px; background:blue; margin:0 2px; transform:scaleY(0.4);

animation: load 1s infinite;}

.loading .pic i:nth-child(1){ }

.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(o.4);}

    20%{transform:scaleY(1);}

}

4.定位在头部的进度条

<div class="loading"> <div class="pic"></div></div>

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

img

$(''.loading .pic).animate({width:"30%"},100);

img

$(''.loading .pic).animate({width:"50%"},100,function(){

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

});

img

5.实时获取加载数据的进度条

建立图像对象：图像对象名称 =new Image();

属性：border  complete  height ...

事件 ： onload onerror  onkeydown  onkeypress...

src 属性一定要写到onload的后面，否则程序在IE中会出错（缓存的原因）

<div class="loading"> 

    <div class="pic">

        <span ></span>

        <b>0%</b>

    </div>

</div>

.loading .pic{font-size:30px; text-align:centet;line-height:100px;}

span{display:block;width:80px; height:80px; position:absolute;top:10px; left:10px;

border-radius:50%; box-shadow:0 3px 0 #666; animation: rotate 1s infinite linear;}

@keyframes rotate{

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

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

}

$(function(){

    var img=new Image();

   

    img.onload = function(){

    

    }

 img.src = "123.jpg"; 

var img = $("img");

var num = 0;

    img.each(function(i){

    var oImg = new Image();

    oImg.onload= function(){

        num++;

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

        if(num >= i){

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

        }

}

       oImg.src = img[i].src;

        

})

})