FREE WORKING EXAMPLE / HTML + CSS
A little orientation.
A normal scroll.
Watch the lavender line as you move through this document. It measures page position, not reading comprehension.
Progress is an enhancement.
CHAPTER 01
Choose one job for the motion
A reading-progress indicator gives orientation on a long page. It should not replace chapter headings, navigation or the browser scrollbar. Start with a document that already works without animation.
CHAPTER 02
Keep the content in HTML
A normal heading, paragraph and link remain readable when CSS animations are unavailable. The thin line is supplementary decoration, so it is hidden from assistive technology instead of announcing every scroll movement.
CHAPTER 03
Scope the progress honestly
This example follows the entire document. It includes every section from the top of the page to the bottom. If your site has a large footer or additional content, it does not measure the article alone. Choose the timeline that matches the experience you want to describe.
CHAPTER 04
Respect the visitor
Nothing intercepts the wheel or touch gesture. Keyboard navigation and fragment links still work. The line disappears when reduced motion is requested. Unsupported browsers show the complete document without a meter.
CHAPTER 05
Test changing content
Load fonts and images before checking your endpoints. Add dimensions for media to limit unexpected layout changes. Test the top, middle and bottom after resizing the viewport, and check that the meter does not cover links or focus outlines.
CHAPTER 06
Keep the implementation small
This demo uses CSS and ordinary HTML. There is no animation library, account requirement or JavaScript scroll listener. The example is useful when the whole page is the reading unit; more complex stories may need a different timeline.