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

  • A+
所属分类:美化特效

看见好多网站打开时网页顶部都有一个进度条,网页加载时开始显示,加载完成时自动隐藏。挺有意思的,下面整理分享给大家。

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

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

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

 

2.就在 header.php 里引用

  1. <link?rel="stylesheet"?type="text/css"?href="css/nprogress.css">
  2. <?script?type="text/javascript"?src="js/jquery-1.11.1.min.js"></script>
  3. <?script?type="text/javascript"?src="s/nprogress.js"></script>

 

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

  1. <script?type="text/javascript">
  2. $(function(){
  3. NProgress.start();
  4. $(document).ready(function(){
  5. NProgress.done();
  6. });
  7. });
  8. <?/script>

然后刷新一下,是不是有进度条了呢?

 

历史上的今天:

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: