CoreNext主题美化教程-顶部彩色滚动进度条百分比

在博客浏览文章时，用户往往无法直观了解当前阅读进度。为此，好软猫带来一款顶部彩色滚动进度条百分比美化方案——当用户向下滚动页面时，顶部会实时显示浏览进度百分比。该效果色彩鲜明、动画流畅，适配CoreNext主题，只需按教程添加代码即可实现。

顶部彩色滚动进度条效果截图

js文件

放置到wp-content/themes/CoreNext-Child/js

123云盘

下载

CSS文件

将以下PHP代码放到：主题设置-插入代码-CSS代码

/*彩色进度条加载显示 _ 好软猫[www.haoruanmao.com]*/
#percentageCounter{
    position:fixed; 
    left:0; 
    top:0; 
    height:3px; 
    z-index:99999; 
    background-image: linear-gradient(to right,#ff0000,#ff00fc,#0006ff,#00ecff,#0eff00);
    border-radius:5px;
}

PHP代码放置

将以下PHP代码放到：主题设置-插入代码-页脚代码

将以下PHP代码放到：主题设置-插入代码-页头代码

<!--顶部彩色进度条 _ 好软猫[www.haoruanmao.com]-->
<div id="percentageCounter"></div>