Reading & Section Progress Indicator System

What this builds

A layered progress indicator system for long-form pages: a thin progress bar at the top of the viewport showing global reading progress, section/chapter dots or ticks showing which chapter is active, and an optional estimated reading time that counts down. The system works together to answer three questions at any scroll position: "how far am I?", "which section am I in?", and "how much is left?".

• Global progress bar: thin horizontal bar at the top of the viewport, width driven by scroll progress
• Section dots: vertical or horizontal dot indicators showing active chapter
• Chapter label: text label showing current section title, updating on scroll
• Estimated reading time: countdown based on visible word count and average reading pace
• Scroll-to-section navigation: clicking a dot smooth-scrolls to that section
• prefers-reduced-motion: progress bar updates instantly (no transition), sections navigate with instant scroll
• Mobile: same indicators but thinner bar, smaller dots