放/body前即可

<!-- 顶部阅读进度条_[猫之书_mzhis.com] --><progress id="content_progress" value="0"></progress>
<script>
document.addEventListener('DOMContentLoaded', function () {
      var winHeight = window.innerHeight,
            docHeight = document.documentElement.scrollHeight,
            progressBar = document.querySelector('#content_progress');
      progressBar.max = docHeight - winHeight;
      progressBar.value = window.scrollY;

      document.addEventListener('scroll', function () {
            progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
            progressBar.value = window.scrollY;
      });
});
</script><!-- 顶部阅读进度条_[猫之书_mzhis.com] -->

下方代码放后台-自定义CSS

/* 阅读进度条_[猫之书_mzhis.com] */
#content_progress {
      /* Positioning */
      position: fixed;
      left: 0px;
      top: 50px;
      z-index: 188;
      width: 100%;
      height: 2px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      background-color: transparent;
      color: #BABABA;
}

#content_progress::-webkit-progress-bar {
      background-color: transparent;
}

#content_progress::-webkit-progress-value {
      background-color: #B8B8B8;/* 修改颜色 */
}

#content_progress::-moz-progress-bar {
      background-color: #BF3EFF;
}
/* 阅读进度条_[猫之书_mzhis.com] */