给 WordPress 网页顶部添加阅读进度条

网页顶部的加载进度条非常常见，像 Youtube 和 Github 上都有见到，Kevin 之前使用的 Tiny 主题就有这么个东西。这两天闲着没事儿想到了于是也给现在的主题添加了一个，效果如下：

因为个人审美的原因我把这个进度条设置的比较细，你可以根据自身情况修改颜色和宽度。要实现给 WordPress 网页添加阅读进度条非常简单，只需要将以下代码片段放进 WordPress 页面中即可。Kevin's Space 把它放在了single.php的底部，让其只在文章页显示，若你想让整个网站都加载阅读进度条，那么将它放在footer.php即可。：

<style>
/* 进度条容器样式 */
.readProgressContainer {
  width: 100%;
  height: 2px;
  background: #ccc;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

/* 进度条样式 */
.readProgressBar {
  height: 2px;
  background: #cc3333;
  width: 0%;
}
</style>

<div class="readProgressContainer">
    <div class="readProgressBar" id="progressBar"></div>
</div>

<script>
window.onscroll = function() {
  updateProgressBar();
};

function updateProgressBar() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progressBar").style.width = scrolled + "%";
}
</script>