添加彩色阅读进度条

彩色阅读进度条

将下方代码放到头部HTML代码内

<div id="percentageCounter"></div>

将下方代码放到随便什么地方

绿红色的

<!-- 阅读进度条开始 -->
<style type="text/css">
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
</style>
 <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>
<!-- 阅读进度条结束 -->

白蓝色的

<!-- 阅读进度条开始 -->
<style>
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #E8EAF6,#C5CAE9,#9FA8DA,#7986CB,#5C6BC0,#3F51B5,#3949AB,#303F9F,#283593,#1A237E);border-radius:5px;}
</style>
 <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>
<!-- 阅读进度条结束 -->