阅读进度条

阅读进度条: 用途

阅读进度条是页面顶部的一条细线，随读者阅读文章而逐渐填满，显示还剩多少。

可选择颜色或渐变、高度，以及位于顶部还是底部。

使用方法

1. 选择颜色、高度和位置。
2. 滚动预览查看效果。
3. 复制代码并粘贴到文章页面。

使用场景

• 博客和长文章。
• 食谱和教程。
• 文档页面。

常见问题

只用 CSS 是怎么实现的？

借助与滚动绑定的动画（animation-timeline: scroll()），进度条会随页面滚动而增长，无需任何脚本，也不会拖慢滚动。Chrome 和 Edge 自 115 版本起支持，Safari 自 26 版本起支持；其他浏览器则使用备用的 JavaScript。

在哪里使用比较值得？

在长文章、食谱和指南中，知道还剩多少有助于继续阅读。在短页面中，进度条几乎不动，没有任何作用。

读屏软件会读取进度条吗？

不会：它只是装饰性的，带有 aria-hidden，以免每次滚动都被播报。使用读屏软件的用户本来就有其他方式了解自己在文中的位置。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具