Scroll Progress Indicator new 滚动进度指示器 Scroll Progress Indicator web
A small cue showing how far a reader has moved through a long page
显示读者在长页面中已经阅读到哪里
Design tokens that survive change
Good systems give a team a shared vocabulary. A token names the decision once so a button, a table, and a dialog can agree without repeating the same guess.
Start with the relationships that matter: type scale, spacing rhythm, color roles, and motion. Then show the states where those decisions become visible to a reader.
Progress is a small cue, but it answers a useful question: how much of this page remains?
Keep the signal quiet enough to disappear while the reader is focused. It should guide, never compete with the content.
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Progress track进度轨道
fixed barThe quiet background line that anchors the reading cue.
承载阅读提示的安静背景线。
Prompt fragmentPrompt 片段a 3px fixed track at the top edge with enough contrast against the page background
页面顶部固定 3px 轨道，与背景保持足够对比
-
2 Progress fill进度填充
transform: scaleXThe filled portion that grows with the reader's position.
随读者位置增长的已填充部分。
Prompt fragmentPrompt 片段a left-origin fill using transform scaleX and transform-origin:left center
使用 transform scaleX 和 transform-origin:left center 从左侧填充
-
3 Reading range阅读范围
scroll metricsThe start and end points used to calculate meaningful progress.
用于计算有意义进度的起点和终点。
Prompt fragmentPrompt 片段progress from the article start to its readable end, excluding the viewport's empty tail
从文章起点到可读终点计算进度，排除视口下方空白尾部
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a scroll progress indicator for a long article. Calculate progress from the viewport bottom relative to the document's readable start and end, render a fixed 3px bar with transform scaleX rather than width, expose an accessible percentage only when useful, avoid covering focus targets, throttle or schedule updates efficiently, and disable smoothing for prefers-reduced-motion.
为长文章构建滚动进度指示器。根据视口底部相对于可阅读起点和终点的位置计算进度；渲染固定在顶部的 3px 进度条，用 transform scaleX 而不是 width；只在有帮助时暴露可访问百分比；不遮挡焦点目标；高效地节流或调度更新；在 prefers-reduced-motion 下关闭平滑动画。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my scroll progress indicator. Check that the denominator excludes the viewport height; the bar reaches 0 and 100 at sensible points; short pages do not show a misleading partial bar; fixed positioning does not cover skip links or focus rings; updates are passive and throttled; nested scroll containers are handled intentionally; and reduced-motion removes smoothing without removing the cue. The symptom:
调试我的滚动进度指示器。检查：分母是否排除了视口高度；进度是否在合理位置从 0 到 100；短页面是否不会显示误导性的部分进度；fixed 定位是否遮住跳转链接或焦点环；更新是否使用 passive 和节流；嵌套滚动容器是否有明确处理；reduced-motion 是否只去掉平滑过渡而保留提示。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| Web | scrollY + scrollHeight | derive progress from the readable document range根据可阅读文档的范围推导进度 |
| CSS | position: fixed + transform | keep the cue visible without affecting layout固定提示而不影响页面布局 |
| ARIA | role="progressbar" | expose a meaningful value when the percentage helps在百分比有帮助时暴露有意义的数值 |
| CSS | @media (prefers-reduced-motion) | remove smoothing while preserving the position cue移除平滑过渡但保留位置提示 |