将下方代码放到头部HTML代码内
<div id="percentageCounter"></div>
css代码：
<!-- 阅读进度条开始 -->
<style type="text/css">
#percentageCounter{
position:fixed;
left:0; top:0;
height:3px;
z-index:99999;
/*绿红色*/
/*background-image: linear-gradient(to right, #339933,#FF6666);*/
/*白蓝色*/
background-image: linear-gradient(to right, #E8EAF6,#C5CAE9,#9FA8DA,#7986CB,#5C6BC0,#3F51B5,#3949AB,#303F9F,#283593,#1A237E);
border-radius:5px;
}
</style>
js代码：
<script type="text/javascript">
$(window).scroll(function() {
var a = $(window).scrollTop(),
c = $(document).height(),
b = $(window).height();
scrollPercent = a / (c - b) * 100;
scrollPercent = scrollPercent.toFixed(1);
$("#percentageCounter").css({
width: scrollPercent + "%"
});
}).trigger("scroll");
</script>
<!-- 阅读进度条结束 -->