外观-自定义css-粘贴

或者自行引入

颜色高度什么的自行f12

  • CSS代码
/*进度条加载显示*/
#percentageCounter{position: fixed;
z-index: 9
position: fixed;
z-index: 9999;
left: 0;
bottom: -3px;
height: 4px;
border-radius: 1.5px;
background: linear-gradient(to right, #FFFFCC, #CCFFFF, #FFCCCC);
transition: width 0.35s;
top: 0;
border-radius:20%;}
  • JS代码
//进度条加载显示
$(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");[precode]
引入JS
[precode]script src="js文件链接"></script>

然后把下面的代码放到header.php的<head></head>里面即可

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