添加加载进度条

发布于 2020-01-17  207 次阅读


简单说一下吧,这个效果呢,是使用jquery库来完成的,在加载到代码是显示一个条出来,然后控制这个条的宽度,也就是说,你把带有宽度的语句添加到合适的位置就可以达到加载进度显示的目的了。

方法如下:

1.在header.php中添加

<div id="w-loading"><div></div></div>  
<script type="text/javascript">  
jQuery("#w-loading div").animate({width:"33%"});  
</script>  

2.添加jQuery代码到footer.php

<script type="text/javascript">  jQuery(document).ready(function(){  jQuery("#w-loading div").animate({width:"100%"},800,function(){  setTimeout(function(){jQuery("#w-loading div").fadeOut(500);  });  });  });  </script>   

3.添加CSS代码到style.css文件

#w-loading{z-index:2468170656;position:absolute;left:0;top:0;width:100%;height:25px;}  
#w-loading div{width:0;height:25px;background:#ccc;}