为Hexo博客添加顶部加载条
有时候会看到有的网页加载时上方出现进度条，一直想加到自己的博客上来，今天折腾了一番，终于成功了，记录下来。
开始制作
我使用的是Pace, 不过听别人说NProgress更好用，改天试下
链入相关的css js文件
在head.ejs里加入中的head里
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
head.ejs路径一般在博客当前目录下的themes/xxx/layout/_partial/中 我使用的cdn外链，也可以下载下来，本地链入
这个时候我们刷新一下博客，发现已经成功了，不过有个问题，默认的颜色为粉红色…让我们来改一改
更改默认样式
还是在head.ejs中,在
中加入
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>上面标注的颜色位置可以任意修改成自己喜欢的颜色
友情提示：这段代码要在上面link链接的下面加入（学过一些css的朋友应该都了解这个问题）
参考文章
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-01-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录