hmoban 
实现方法太简单了，请往下看
一、在主题的footer.php文件</body>前插入以下代码
<script>
// 当页面滚动时更新进度条
window.addEventListener('scroll', function() {
const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (window.scrollY || window.pageYOffset) / windowHeight * 100;
document.getElementById('progress-indicator').style.width = scrolled + '%';
});
</script>
二、在主题的header.php文件<body>之后插入以下代码
<!--进度条-->
<div id="progress-bar">
<div id="progress-indicator"></div>
</div>
三、在主题的header.php文件</head>之前插入以下CSS代码，五种风格任选其一
风格一：彩虹流动渐变
/* 容器 */
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(0,0,0,0.1);
z-index: 9999;
}
/* 进度条主体 */
#progress-indicator {
height: 100%;
width: 0;
background: linear-gradient(
90deg,
#ff6b6b 0%,
#ff8e8e 20%,
#ffd93d 40%,
#6c5ce7 60%,
#00c6ff 80%,
#00ff87 100%
);
background-size: 200% 100%;
animation: gradientFlow 3s linear infinite;
transition: width 0.3s ease;
}
@keyframes gradientFlow {
0% { background-position: 100% 0; }
100% { background-position: 0 0; }
}
风格二：霓虹光效
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(0,0,0,0.3);
z-index: 9999;
}
#progress-indicator {
height: 100%;
width: 0;
background: #0ff;
box-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
filter: blur(1px);
transition: width 0.3s ease;
}
风格三：动态双色渐变
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: rgba(255,255,255,0.2);
z-index: 9999;
}
#progress-indicator {
height: 100%;
width: 0;
background: linear-gradient(90deg, #ff6b6b, #ff8e8e, #ffd93d);
background-size: 200% 200%;
animation: gradientShift 4s ease infinite;
transition: width 0.3s ease;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
风格四：糖果条纹
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: #f0f0f0;
z-index: 9999;
}
#progress-indicator {
height: 100%;
width: 0;
background: repeating-linear-gradient(
-45deg,
#ff6b6b,
#ff6b6b 10px,
#ffd93d 10px,
#ffd93d 20px
);
transition: width 0.3s ease;
}
风格五：动态流光效果
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(0,0,0,0.1);
z-index: 9999;
}
#progress-indicator {
height: 100%;
width: 0;
background: #667eea;
position: relative;
overflow: hidden;
transition: width 0.3s ease;
}
#progress-indicator::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
animation: shine 2s infinite;
}
@keyframes shine {
100% { left: 200%; }
}
