scroll progress indicator reading navigation scroll progress indicator for articles reading progress bar at page top visual scroll position feedback user has no sense of scroll position in long articles need reading progress without JS scroll listeners want a minimal scroll indicator
Progress Bar
Fetch snippet JSON:
curl https://webspire.de/snippets/scroll/progress-bar.json Background
Customize
Quick Start
<div class="scroll-progress" aria-hidden="true"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 606 bytes · 34 lines
- Custom Properties
-
--progress-color--progress-height - Classes
-
.scroll-progress
scroll progress indicator reading navigation
A fixed progress bar at the top of the page that fills as the user scrolls. Uses animation-timeline: scroll() to tie the bar width directly to the scroll position — zero JavaScript.
Add to any page
<body>
<div class="scroll-progress" aria-hidden="true"></div>
<!-- rest of page -->
</body>Customized colors with Tailwind
<!-- Purple gradient progress bar -->
<div class="scroll-progress" style="--progress-color: oklch(0.7 0.2 300); --progress-height: 4px" aria-hidden="true"></div>