Is there an existing issue for this?
Feature Description
Add a thin, animated scroll-progress indicator to the site's sticky header. As the user scrolls down a page, a bar along the header's bottom edge should fill left-to-right proportional to how far they've scrolled (0% at the top of the page, 100% at the bottom). The bar should use the site's existing accent color so it feels like a native part of the design rather than a bolted-on addition, and should update smoothly via requestAnimationFrame with a passive scroll listener to avoid layout jank. It should also respect prefers-reduced-motion for accessibility.
Use Case
Long-form pages (documentation, blog posts, guides) currently give no visual feedback on how much content remains below the fold. Readers have to rely on the browser's native scrollbar, which is thin, low-contrast, and easy to miss — especially on wide viewports or dark backgrounds. A header-integrated progress bar gives constant, low-effort feedback on reading progress without requiring the user to look away from the content.
Benefits
- Improves UX on long content — docs pages, blog posts, and tutorials benefit most, giving readers a clear sense of progress.
- Reinforces brand consistency — reuses the existing header accent color, so it requires no new design decisions.
Low implementation cost — a single scroll listener plus a small CSS/JS addition; no new dependencies or backend changes.
- Accessible by default — built with prefers-reduced-motion support from the start.
Reusable pattern — once added to the header, it works across every page automatically without page-specific code.
Add ScreenShots
Priority
Medium
Record
Is there an existing issue for this?
Feature Description
Add a thin, animated scroll-progress indicator to the site's sticky header. As the user scrolls down a page, a bar along the header's bottom edge should fill left-to-right proportional to how far they've scrolled (0% at the top of the page, 100% at the bottom). The bar should use the site's existing accent color so it feels like a native part of the design rather than a bolted-on addition, and should update smoothly via requestAnimationFrame with a passive scroll listener to avoid layout jank. It should also respect prefers-reduced-motion for accessibility.
Use Case
Long-form pages (documentation, blog posts, guides) currently give no visual feedback on how much content remains below the fold. Readers have to rely on the browser's native scrollbar, which is thin, low-contrast, and easy to miss — especially on wide viewports or dark backgrounds. A header-integrated progress bar gives constant, low-effort feedback on reading progress without requiring the user to look away from the content.
Benefits
Low implementation cost — a single scroll listener plus a small CSS/JS addition; no new dependencies or backend changes.
Reusable pattern — once added to the header, it works across every page automatically without page-specific code.
Add ScreenShots
Priority
Medium
Record