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

在博客浏览文章的时候无法看到文章浏览了多少了，这个时候我们就需要一个进度条来展示。好软猫给大家带来了比较常见的顶部美化彩色进度条，跟着教程来就可以实现用户浏览时实时看到浏览进度百分比了。

效果截图

js文件

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

123云盘

来源：123盘 | 提取码:q6wM

立即下载

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>

来源：云亿企