Scroll Progress
A reading progress indicator that tracks the document's scroll position and updates the fill width via requestAnimationFrame on scroll and resize events. Use it at the top of articles and long pages to show how much is left to reach the end. It has an agent-native layer: data-pura-scroll-progress-* attributes reflect the percentage and pixel offsets live, and each instance registers itself in window.__puraScrollProgress by its data-pura-id, allowing an agent to read the progress without traversing the DOM.
Preview
<pura-scroll-progress color="#7c3aed" height="5px"></pura-scroll-progress>
<article style="max-width:640px;margin:0 auto;padding:24px;font-family:system-ui,sans-serif;line-height:1.7">
<h1>The history of coffee in Brazil</h1>
<p id="status" style="color:#7c3aed;font-weight:600">Reading progress: 0%</p>
<p>Coffee arrived in Brazil in 1727. Scroll down the page and watch the purple bar at the top of the window fill as you move through the text.</p>
<p>Within a few decades, the plantations spread across the Paraiba Valley and the western part of Sao Paulo.</p>
<p>Keep scrolling to see the bar reach close to 100% at the end of the text.</p>
<p>End of the reading. The bar should be complete now.</p>
</article>
<script type="module">
const bar = document.querySelector('pura-scroll-progress');
const status = document.getElementById('status');
bar.addEventListener('pura-scroll-progress', (e) => {
status.textContent = 'Reading progress: ' + e.detail.percent + '%';
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
color | string | var(--pura-primary) | Fill color of the bar (any valid CSS color). The track stays transparent. |
height | string | 3px | Thickness of the bar (any valid CSS length, e.g.: "3px", "0.25rem"). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/scroll-progress.js"></script>import "./pura/lib/scroll-progress.js";