Reading Progress
Reading progress bar. Pro · Content and social › Reading and author
A visual cue only: it is hidden from assistive technology, because a progressbar whose value changes on every scroll frame makes screen readers announce (or beep) continuously, and readers already know where they are. Where the browser runs scroll-driven animations, the fill is one of them, on a scroll or view timeline: no script runs while the page scrolls. Elsewhere a scroll listener writes it once per frame.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add reading-progressnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ReadingProgress } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
target | RefObject<HTMLElement | null> | The article being read: the bar fills from its top reaching the viewport top to its end reaching the bottom. Default: the whole scrollable content. | |
container | RefObject<HTMLElement | null> | Scrolling element that holds the article, when it is not the window (a reader pane, a modal). | |
position | 'fixed' | 'sticky' | 'static' | 'fixed' | fixed: pinned to the top of the viewport (default); sticky: to the top of its scroll container; static: in the flow. |
thickness | number | 3 | Height of the bar in px (default 3). |
Related components
- Article Toc — Article table of contents that tracks the current section
- Share Bar — Share: Telegram, VK, X, WhatsApp, email and copy link
- Author Bio — Author card at the end of an article, with a follow button
- Article Header — Article header: section, headline, lede, authors and date
- Byline — Byline: authors, published and updated dates, reading time
- Article Figure — Image with caption and photo credit
- Pull Quote — Pull quote with attribution
- Key Points — “Key points” summary block
- Editor Note — Update, correction, disclosure and sponsored-content notes
- Article Card — News card: vertical, horizontal and over a photo
- Live Blog — Live blog: update feed, pinned and key events
- Breaking News — “Breaking” banner with rotating headlines
Previous: Article Toc · Next: Share Bar · All Content and social