有时候会看到有的网页加载时上方出现进度条,一直想加到自己的博客上来,今天折腾了一番,终于成功了,记录下来。

开始制作

我使用的是Pace, 不过听别人说NProgress更好用,改天试下

链入相关的css js文件

head.ejs里加入中的head里

1
2
<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中,在

中加入
1
2
3
4
5
6
7
8
9
10
11
12
13
<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的朋友应该都了解这个问题)

参考文章

Hexo博客美化之动画效果加雪花

如有问题欢迎大家下方留言,也可邮箱联系我 Waydrow@163.com