nuxt-x-affiliate
Reading Progress
Top progress bar that tracks scroll position through an article element.
Reading Progress
The XAFReadingProgress component renders a thin colored bar pinned to the top (or bottom) of the viewport, showing what percent of the article body the reader has scrolled through. Updates on scroll and resize. Uses role="progressbar" with aria-valuenow for screen readers.
Components
<XAFReadingProgress />
<XAFReadingProgress target="article" color="#3b82f6" :height="3" position="top" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
target | string | "article" | CSS selector of the element to track. |
color | string | "#3b82f6" | Bar color (any CSS color). |
height | number | 3 | Bar height in pixels. |
position | 'top' | 'bottom' | 'top' | Viewport edge. |
Place this once in your article layout (e.g. inside the [...slug].vue page) — it has no DOM footprint until the page is scrolled.
AI Context
component: XAFReadingProgress
package: "@xenterprises/nuxt-x-affiliate"
use-when: Top progress bar that tracks scroll position through an article element, ARIA progressbar.