今天花生给博客添加了页面载入进度条，普通的页面加载一般都比较生硬，如果载入速度慢的话，很难让浏览者等待页面加载，如果把页面加载过程做成动态进度条，肯定给浏览者一个很好的等待体验。

我的博客是在顶部添加的1px的蓝线消失的过程，等页面全面加载完毕后，蓝线就会全部消失。

加载条的载入原理其实很简单：WordPress主题一般由header、index(single、archive)、sidebar、footer四部分构成，我们对每部分加载样式的一部分，到最后加载完毕即可。

要实现线条加载的效果，需要主题启用jQuery功能，在<header></header>之间加入代码：

为了提升js文件的加载速度，我直接把这个js文件放在主题目录下，你也可以使用下面的代码（二者选一）：

在页面body开始标签的后面加入代码：

CSS文件样式代码加入到主题的style.css文件中：

/*头部进度条*/
#blog-loading {
width:100%;
height:1px;
background:#0099cc;
position:fixed;
left:0;
top:0;
}
#blog-loading div {
width:1px;
height:1px;
background:#fff;
}

之后在主题的各部分加载这个样式，我在header中加载15%，在index部分加载30%，在sidebar部分加载60%，在footer中加载完毕。

那就在各部分加入以下代码：

把里面的15%换成进度即可。