WordPress折腾:给网站加了个进度条-ZAERA

无聊折腾

当然啊,WordPress好久不折腾了,纯粹是手痒痒了,不过过几天厌烦了,可能会直接就把它给撤掉,不太喜欢搞很多动画,虽然这些动画看起来很好看。也是闲着无聊,顺带着把那个百度的熊掌号页面给做了。

关于熊掌号,这个东西大家要稍微看重一点,毕竟熊掌是百度的标志,百度的logo都是熊掌,可想而知的重要性不言而喻。

关于熊掌号拖到今天,也就不说啥了,总算解决了!

不过,今天看到一个站点,上面有个进度条,显得很好看,心痒痒也想着整一个。这不,依靠百度整了一个多小时,弄好了,赶紧记下来,恐怕后面给忘了,顺便也分享给大家,谁想用,甭客气,直接拿走就是了。

首先呢,先介绍一下,这个东西名字叫Nprogress,这个小东西估计做前端的熟悉,我不熟悉,教程还是到GitHub找到的。

这个小东西该怎么用呢?别急,先看看需要准备些什么?

首先,先确认有没有jQuery.js,没有的话,使用公共库CDN或者网上下载一个,添加一下,很方便。

如果有的话,你可以选择在本地使用,也可以使用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>

把这两行代码放到<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>之间。

最后就是,刷新页面,清除缓存,看看是不是顶部有一个进度条,是不是特简单!