NAVIGATION
阅读进度条Reading Progress Bar
页面最顶部一条 3px 的细线，随滚动从左向右填满，告诉读者"还剩多少"。
效果预览
如何设计一个好首屏46%
一、留白比装饰重要
适合用在哪
长文、博客、文档页；也常用在移动端网页顶部。
容易踩的坑
- 在 scroll 事件里直接改 width 且不节流，每帧触发重排，长文滚动明显卡顿。
- 页面底部有很长的评论区或页脚时，进度在正文读完时才到 70%，失去参考意义。
- 进度条用 3px 浅色渐变但没有 role="progressbar"，读屏用户完全感知不到。
设计提示词 · Prompt
滚动进度条（Reading Progress Bar）：固定在页面最顶端的一条 3-4px 细横线，宽度 = 已滚动距离 / 总可滚动距离（用 scroll 事件或 scroll-timeline 计算）。已读部分用品牌渐变（如 #4F46E5 → #C026D3），未读部分透明或极浅灰。使用 transform:scaleX() 驱动而不是改 width，保证 60fps。滚动条下方再配一条 sticky 的子导航或文章标题栏，让读者始终知道自己在哪一节。
Reading Progress Bar: a thin 3-4px horizontal line fixed at the very top of the page, whose width = scrolled distance / total scrollable distance (computed via the scroll event or scroll-timeline). The read portion uses a brand gradient (e.g. #4F46E5 → #C026D3); the unread portion is transparent or very light gray. Drive it with transform:scaleX() instead of changing width to guarantee 60fps. Pair it with a sticky sub-nav or article title bar below, so readers always know which section they're in.
常见搭配
同一页面里经常和「阅读进度条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-prog">
<div class="d-prog__top"><div class="d-prog__fill"></div></div>
<div class="d-prog__head"><span>如何设计一个好首屏</span><span>46%</span></div>
<div class="d-prog__body">
<h4 class="d-h3">一、留白比装饰重要</h4>
<span class="d-prog__ln" style="width:94%"></span>
<span class="d-prog__ln" style="width:82%"></span>
<span class="d-prog__ln" style="width:88%"></span>
<span class="d-prog__ln" style="width:56%"></span>
</div>
</div>