给网站顶部加个加载进度条

殷德瑶 2015-10-2 emlog教程评论 5171 次

看见好多网站打开时网页顶部都有一个进度条，网页加载时开始显示，加载完成时自动隐藏。为提升本博客的逼格，找到个NProgress.js插件。使用起来比较简单。当然我这个使用比较简单。大家可参照文档自己去写。

1.NProgress Github地址：https://github.com/rstacruz/nprogress/

直接下载zip代码，解压出来将nprogress.css以及nprogress.js复制出来放到你的主题目录下

另外还需要jQuery1.8版本以上。

2.就在header.php里引用

< script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

< script type="text/javascript" src="s/nprogress.js"></script>

3.在footer.php </body>标签前添加如下代码：

<script type="text/javascript">
$(function(){
NProgress.start();
$(document).ready(function(){
NProgress.done();
});
});
< /script>