当然啊，WordPress好久不折腾了，纯粹是手痒痒了，不过过几天厌烦了，可能会直接就把它给撤掉，不太喜欢搞很多动画，虽然这些动画看起来很好看。也是闲着无聊，顺带着把那个百度的熊掌号页面给做了。
关于熊掌号，这个东西大家要稍微看重一点，毕竟熊掌是百度的标志，百度的logo都是熊掌，可想而知的重要性不言而喻。
关于熊掌号拖到今天，也就不说啥了，总算解决了！
不过，今天看到一个站点，上面有个进度条，显得很好看，心痒痒也想着整一个。这不，依靠百度整了一个多小时，弄好了，赶紧记下来，恐怕后面给忘了，顺便也分享给大家，谁想用，甭客气，直接拿走就是了。
首先呢，先介绍一下，这个东西名字叫Nprogress，这个小东西估计做前端的熟悉，我不熟悉，教程还是到GitHub找到的。
这个小东西该怎么用呢？别急，先看看需要准备些什么？
首先，先确认有没有jQuery.js,没有的话，使用公共库CDN或者网上下载一个，添加一下，很方便。
<script crossorigin="anonymous" integrity="sha384-AQhQSZGQWTMJhb/TdS7NWpCmOM/8lIEsaevSU5oZtt8pQKoa+uJL4A2WnQ0O5Zj2" src="//lib.baomitu.com/jquery/3.5.0/jquery.js"></script> （举例，使用360公共前端库，自适应的）
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script> (jsdelivr也很不错呢)如果有的话，你可以选择在本地使用，也可以使用CDN，看你选择。
使用本地的话，js、CSS文件请去GitHub下载：https://github.com/rstacruz/nprogress
下载名字为nprogress.js、nprogress.css这两个小东西，并且补充到路径里，具体的操作就不讲述了，GitHub里有教程 。
注重讲使用CDN，CDN加载要比本地服务器加载快多了，而且全国基本速度都差不多。
使用CDN的话，那就太简单了，还快，还简单，何乐而不为呢，墙裂推荐使用CDN！
关于这个CDN的来源，有必要解释一下，这家的CDN是BootCDN支持的，亲自用过一段时间，99%的可用率，这家是和又拍云合作的，如果出现公共库出现攻击导致网站打不开，又拍云会负责解决的，很大家放心使用！
如果真的实在不放心的话，请务必不要使用CDN，直接下载JS和CSS文件在本地调用即可！
CDN支持https，大可放心使用！
<link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.js"></script>
目前建议，强烈使用字节跳动的CDN，加载速度明显比bootcdn要快，要稳，不信可以测试！
<script src="https://s3.pstatp.com/cdn/expire-1-M/nprogress/0.2.0/nprogress.min.js"></script>
<link href="https://s2.pstatp.com/cdn/expire-1-M/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">把这两行代码放到<head>…</head>之间。
当当当，剩下的重磅来袭
<script>
// Show the progress bar
NProgress.start();
// Increase randomly
var interval = setInterval(function() { NProgress.inc(); }, 1000);
// Trigger finish when page fully loaded
jQuery(window).load(function () {
clearInterval(interval);
NProgress.done();
});
// Trigger bar when exiting the page
jQuery(window).unload(function () {
NProgress.start();
});
</script>把这代码也直接也粘贴到<head>…</head>之间。
最后就是，刷新页面，清除缓存，看看是不是顶部有一个进度条，是不是特简单！
就放心吧，BootCDN用的是又拍云！收费的哪敢GG，可以说99%稳定。在考虑BootCDN挂之前想想自己会不会挂吧
@狂放 这句话，信了！
没看到效果图无法体会
@懿古今 这个效果图啊，我给撤掉了
支持 :wink:
@leo2heaven 谢谢支持
又让博客多了一项加载。
@热腾网 加了也好，美观一些，实际用上也不太影响体验
有个进度条 ，逼格高大上，牛
@银色月航 昨天就看见你的站已经用了，感觉很不错啊！
本地和CDN各有各的优劣势，CDN肯定要快。其实我觉得网站的加载速度要大于美观度，所以一般动画，我都没有用 :mrgreen:
@养肝护肝 加上这个东西纯属心里作用，实际并没有什么卵用
@冰鸟 一切为了用户体验 :mrgreen:
@晴和君 当然了，用户为王
之前好像也弄过一个，后来去掉了，简洁一点
@唯心寒辞 我正想把这东西撤掉呢，又不想用了
万一哪天cdn一下子抽风的话不就完蛋了！ :eek:
@明月清风 你们怎么都这么想，我本地已经做好了啊，又不是不能用，大不了撤掉
@冰鸟 不怕一万，就怕万一呀！
@明月清风 弄啥都是有风险的，不能说有风险的我们就不用，服务器被还有被攻击的风险呢，公用的CDN干嘛不用，这家的CDN我都用了好长时间了，效果还不错，都在200ms左右。可以百度搜索一下这家的名字叫bootcdn，再做决定用不用吧.总的来说吧，关键又没有多少人访问，管他呢！
@冰鸟 那我就好好支持一下吧！我也看看我搞一个。
@明月清风 这个前端公用库是又怕云支持的，又拍云还是算靠谱点吧，和七牛云差不多，感觉比七牛好点，都是主要做CDN业务的，比较专注，各方面还是比较完善的，技术方面敢于突破创新，挺看好的又拍云的，我打算CDN再申请个又拍云试试！
呃，。。如果CDN挂了，你这里岂不是卡半天？
@姜辰 应该不会挂吧，那么时间了