超简单页面加载进度条

css代码如下：

.loading{ 
     background:#FF6100;
     height:5px;
     position:fixed; 
     top:0;
     z-index:99999;
}
.content{display: none;}

js代码如下：

<script src="js/jquery.min.js"></script>
<div class="loading"></div>
<script type="text/javascript">
    $('.loading').animate({'width':'10%'},50); 
    //第一个进度节点 
    alert("10%")
</script>

<script type="text/javascript">
    $('.loading').animate({'width':'20%'},50); 
    //第二个进度节点 
    alert("20%")
</script> 
<script type="text/javascript">
    $('.loading').animate({'width':'30%'},50); 
    //第三个进度节点 
    alert("30%")
</script> 
<script type="text/javascript">
    $('.loading').animate({'width':'40%'},50); 
    //第四个进度节点 
    alert("40%")
</script> 

<div class="content">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512711230380&di=b2b777dc0c5df379377dfec9f2987956&imgtype=0&src=http%3A%2F%2Fp0.qhimg.com%2Ft018eae0c02dbeb02d0.png" height="115" width="190" alt="" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512711260983&di=f19cc225100ecda52c621329a1e38206&imgtype=0&src=http%3A%2F%2Fimg2.pconline.com.cn%2Fpconline%2F0707%2F29%2F1067959_070730bg04.jpg" height="115" width="190" alt="" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512711280445&di=640c1a17710f8d0fc21f2b305c16d148&imgtype=0&src=http%3A%2F%2Fimg2.pconline.com.cn%2Fpconline%2F0707%2F29%2F1067959_070730bg07.jpg" height="115" width="190" alt="" />
    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2607546123,3017063551&fm=27&gp=0.jpg" height="115" width="190" alt="" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512711296795&di=8c1b11fe990f5158dc14512004e237a4&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_111016%2F1110162343f047df40a5a4d6fb.jpg" height="115" width="190" alt="" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512711304788&di=aa4e3b98ccbf64e96a0a44a23bb477df&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fc995d143ad4bd113c251b84c58afa40f4bfb052b.jpg" height="115" width="190" alt="" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512711313324&di=7b67b8d38bd85b93944795a6cfcb254a&imgtype=0&src=http%3A%2F%2Fpic33.photophoto.cn%2F20141117%2F0011024093634240_b.jpg" height="115" width="190" alt="" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513306040&di=2caf2436c3da2477b5dd5af0e4facb0f&imgtype=jpg&er=1&src=http%3A%2F%2Fa3.topitme.com%2F8%2Fab%2Ff7%2F11520312693f5f7ab8o.jpg" height="115" width="190" alt="" />
    <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3641997082,269144396&fm=27&gp=0.jpg" height="115" width="190" alt="" />
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512711338418&di=8b2d9af2b7519f5c23e380c471330767&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F9345d688d43f8794fb05122ed01b0ef41bd53a33.jpg" height="115" width="190" alt="" />
</div>
<script type="text/javascript">
    $('.loading').animate({'width':'70%'},50); 
    //第五个进度节点 
    alert("70%")
</script> 

<script type="text/javascript">
    $('.loading').animate({'width':'80%'},50); 
    //第六个进度节点 
    alert("80%")
</script> 

<script type="text/javascript">
    $('.loading').animate({'width':'90%'},50); 
    //第七个进度节点 
    alert("90%") 
</script> 
<script type="text/javascript">
    $('.loading').animate({'width':'100%'},50); 
    //第八个进度节点 
    alert("100%")
    $('.loading').css("display","none");
    $('.content').css("display","block");
</script> 

如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。