常用的网页加载进度条_html-js-css

概述随着HTML5的普及，各种CSS3动画及JS特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢很多，如果图片或脚本没有完全载入，用户在 *** 作中可能会发生各种问题，因此我们需要对数据载入进行侦测，以更加人性化的方式给用户展现。 1.css3小动画加载 <div class="loading"> <ul> <li></li> <li></li

随着HTML5的普及，各种CSS3动画及Js特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢很多，如果图片或脚本没有完全载入，用户在 *** 作中可能会发生各种问题，因此我们需要对数据载入进行侦测，以更加人性化的方式给用户展现。

1.CSS3小动画加载

<div class="loading">    <ul>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></div>

*{margin: 0;padding: 0;}            .loading{wIDth: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: #fff;z-index: 10;}            .loading ul{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;wIDth: 50px;height: 50px;}            .loading ul li{display: block;wIDth: 6px;height: 50px;float: left;margin: 0 2px;background-color: #cd2828;            -webkit-transform: scaleY(0.5);-ms-transform: scaleY(0.5);transform: scaleY(0.5);            -webkit-animation: load 1.2s infinite;animation: load 1.2s infinite;}            .loading ul li:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}            .loading ul li:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}            .loading ul li:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}            .loading ul li:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}            @-webkit-keyframes load{                0%,40%,100%{-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}                20%{-webkit-transform: scaleY(1);transform: scaleY(1);}            }            @keyframes load{                0%,100%{-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}                20%{-webkit-transform: scaleY(1);transform: scaleY(1);}            }

document.onreadystatechange = function() {    if (document.readyState == "complete") {        $(".loading").hIDe();    }}

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

以图片加载为例，文字可以忽略不计。

<div >    <div >        <span></span>        <b>0%</b>    </div></div>

*{margin: 0;padding: 0;}            .loading{wIDth: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: #fff;z-index: 10;}            .loading .pic{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;wIDth: 50px;height: 50px;line-height: 50px;text-align: center;Font-size: 16px;}            .loading .pic span{display: block;wIDth: 40px;height: 40px;position: absolute;left: 5px;top: 5px;Box-shadow:  0 2px 0 #666;border-radius: 100%;            animation: rotate 1s infinite linear;-webkit-animation: rotate 1s infinite linear;}            @keyframes rotate{                0%{transform: rotate(0deg);}                100%{transform: rotate(360deg);}            }            @-webkit-keyframes rotate{                0%{-webkit-transform: rotate(0deg);}                100%{-webkit-transform: rotate(360deg);}            }

var img = $("img");                var num = 0;                img.each(function(i) {                    var oimg = new Image();                    oimg.onload = function() {                        oimg.onload = null;                        num++;                        $(".loading b").HTML(parseInt(num / img.length * 100) + "%");                        if (num >= i) {                            $(".loading").hIDe();                        }                    }                    oimg.src = img[i].src;                });