子比主题美化：高辨识度彩虹渐变顶部进度条

在网站中添加顶部滚动进度条，既能让用户直观感知页面阅读进度，又能通过亮眼的视觉设计提升站点的个性化程度。今天就给大家分享一款适配子比（Zibll）主题的高辨识度彩虹渐变顶部进度条，支持浅色 / 深色模式自动切换，还能开启动态流光效果，简单几步就能搞定！

效果预览

• 浅色模式：经典彩虹渐变，色彩鲜艳不刺眼，滚动时进度条宽度随页面位置实时变化。
• 深色模式：自动提亮彩虹色值，适配深色背景，避免颜色过暗导致辨识度降低。
• 动态流光：渐变背景循环位移，进度条自带流动感，静态模式也可一键切换。

实现步骤

1. 复制 CSS 样式代码

将以下代码粘贴到子比主题后台的自定义设置 → 自定义代码 → 自定义 CSS 样式 区域。

2. 复制 JS 功能代码

将以下代码粘贴到同一页面的 自定义 JS 代码 区域，实现滚动进度的实时计算。

3. 保存并生效

点击后台的保存设置按钮，刷新网站前端页面，就能看到彩虹渐变的顶部进度条啦！

自定义调整技巧

1. 关闭动态流光效果

如果不需要流动的渐变效果，只想保留静态彩虹条，删除 CSS 代码中的以下部分即可：

animation: rainbowFlow 12s linear infinite;

以及整个 @keyframes rainbowFlow 代码块。

2. 调整进度条高度

修改 CSS 中 .zib-scroll-progress 的 height 属性：

• height: 3px → 更纤细的进度条
• height: 5px → 更醒目的进度条注意：同时需要将 .header 的 top 值同步修改为相同数值，避免遮挡导航栏。

3. 调整流光速度

修改动画时长 12s 的数值：

• 8s → 流光速度更快
• 15s → 流光速度更慢

4. 简化彩虹配色

如果觉得 7 种颜色太花哨，可以删减 linear-gradient 中的色值，例如保留 4 种主色：

background: linear-gradient(90deg, #ff6347, #32cd32, #1e90ff, #ff69b4);

适配说明

1. 该进度条不修改主题核心文件，通过自定义代码实现，安全无风险，后续主题更新不会被覆盖。
2. 完美适配子比主题的浅色 / 深色模式，切换主题模式时，进度条颜色会自动调整。
3. 不影响页面任何元素的点击交互，滚动时的宽度过渡丝滑无卡顿。

写在最后

这款彩虹渐变顶部进度条，既能提升网站的视觉吸引力，又能给用户带来更直观的阅读体验。