Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA thin bar that fills as the reader scrolls through an article, measured on animation frames and exposed as a progressbar.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it at the top of long articles and docs pages. Pass a target ref when the article scrolls inside its own box instead of the window.
Do not use it when: the page is short enough to see at once, or the layout already has a step indicator.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
target | RefObject<HTMLElement> | document | The scrolling element to measure. |
label | string | "Reading progress" | The progressbar's accessible name. |
className | string | - | Extra classes, for example fixed top-0. |
A progressbar with aria-valuenow from 0 to 100 and an accessible name. It is informational: it takes no focus and announces nothing on scroll. The fill transition is removed under prefers-reduced-motion.
The pattern ships with a test (reading-progress-bar.test.tsx). It covers the value computed from a target's scroll position.