前言
嗯。。大家一定见过很多站点都有这个加载进度条啊。
具体效果久伴就不截图了。欢迎刷新页面看网页头部啊。。一条灰色的进度条的说~
需要你的模板加载jquery库，加载方法在这里就不再敖述了。
简单说一下吧，这个效果呢，是使用jquery库来完成的，在加载到代码是显示一个条出来，然后控制这个条的宽度，也就是说，你把带有宽度的语句添加到合适的位置就可以达到加载进度显示的目的了。
方法如下：
1.在header.php中添加
- <div id=“w-loading”><div></div></div>
这个添加到自己模板header.php合适的位置上。久伴是添加在了header.php的标签中。
2.添加加载进度显示的位置
- <script type=“text/javascript”>
- jQuery(“#w-loading div”).animate({width:“33%”});
- </script>
上述代码中，width:”33%”可以更改。更改为自己需要的百分比。 久伴将上述代码放置到harder.php（20%）加载文章的循环之后（40%）和sidebar.php（60%）以及底边栏（80%）。
3.添加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>
4.添加CSS代码到style.css文件
- #w-loading{z-index:99999;position:absolute;left:0;top:0;width:100%;height:25px;}
- #w-loading div{width:0;height:25px;background:#ccc;}
可以按照自己的要求修改颜色啥的
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势？
1.文章内部资源由于时间久远可能失效，加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人，加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网，也需要群体，加群一起互动交流，畅所欲言
扫描下方二维码即可加入交流讨论
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
