Reading Progress Footer Block for React

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.

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.

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.

Edit CHAPTERS: each has a title and a status of read, current or unread. The totals, the current chapter, the next-chapter link and the sentence are all computed from that list. The percentages are not typed anywhere.

The first band's heading, count and next-chapter link stack, and the track runs the full width of the band. Below it the brand comes first, then the two link groups side by side, then the legal row.