shadcn.io is not affiliated with official shadcn/ui
Reading Progress Footer Block for Vue
A footer for a team handbook with a reading-path progress track that follows the real scroll, a count of chapters read, the next chapter as a link, and two link columns.
Installation
Overview
A footer for Vue with Ark UI that shows where the reader is in a longer text. Three ruled bands. The first is the reading path through a handbook of ten chapters (a typed list: six read, this page the seventh): a progress track, a sentence in words ("6 of 10 chapters read", then "7 of 10" at the page's end), the share of this page read, and a link to the next chapter. The track's fill is the chapters read plus how far down this page the reader has scrolled, so it moves with the real scroll position. The second band is the brand and the nav labelled Footer in two groups; the third is the legal row.
FAQ
What does the progress track follow?
Six chapters are marked read in the typed CHAPTERS list. The seventh is the current page: its share is the real scroll position (how far down the page the reader has scrolled, 0 to 100 percent), added to the six and divided by ten. A page too short to scroll counts as read, and at 98 percent the sentence moves from "6 of 10" to "7 of 10 chapters read". A passive scroll listener updates it; there is no animation frame loop.
What happens with reduced motion?
Nothing needs turning off: the fill has no transition, because it follows the scroll directly, and nothing in the block moves by itself. The track is a visual copy of numbers that are always in the text beside it.
Is there a text equivalent of the bar?
Yes: the bar is hidden from assistive technology and the same facts are in text next to it: "6 of 10 chapters read" and "Chapter 7, Running a retro: 42% of this page read". The text updates as you scroll, but it is not a live region, so a screen reader is never interrupted by it.