关于网页载入，页面顶部显示页面加载线性进度条效果实现。

本文链接：https://blog.csdn.net/CodingNoob/article/details/77915236

今早早逛淘宝的时候突然发现淘宝每次在点击进入下页的时候的页面顶部就会出现页面载入进度效果，其实之前在访问好多国外的网站的时候也见过这样的效果，突然一时兴起想要知道如何实现。

如图所示：

这里写图片描述

然后就百度一下，竟然找到了两款插件，。

插件一：LoadingBar

LoadingBar.js的地址是：http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/

插件二：NProgress.js
NProgress.js的地址是：http://ricostacruz.com/nprogress/

这里只介绍NProgress.js调用方法，第一个自己去琢磨吧。

这里写图片描述

根据英文翻译（英语水平太渣翻译不对见谅）：

第一个方法是开始进度
第二个方法是设置百分比
第三个方法是设置增量
第四个方法是结束进度

具体调用demo：

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>NProgress: slim progress bars in JavaScript</title>
  <link href='support/style.css' rel='stylesheet' />
  <link href='nprogress.css' rel='stylesheet' />
  <meta name="viewport" content="width=device-width">  
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

<body>

</body>
</html>
<script src='nprogress.js'></script>
<script>
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
 </script>

这里要注意的时候

<script>
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
 </script>

这里代码一定要放到底部执行，切在引入NProgress脚本后，如果放到header里面则不会得到想要的效果。一开始我也陷入坑里面了。

运行效果如下：

这里写图片描述