Reading Progress Bar
10 sites
Security covered
This module adds a progress bar to your site that visually indicates how much of a page the user has read. It works well for content-heavy sites and offers features like handling dynamic content, customizable tracking, and automatic hiding.
This module displays a horizontal progress bar at the top of the page, showing how much content a user has read—also known as a Reading Position Indicator.
It is especially useful for content-heavy sites like blogs, tutorials, or documentation, where users benefit from seeing their reading progress in real time.
Additional features
- Accurately handles dynamic content with varying heights.
- Allows targeting a specific container for tracking reading progress, not just the entire document.
- Supports automatic hiding of the progress bar after a configurable delay when the user stops scrolling.
- The progress bar can be hidden automatically when the content height relative to the viewport height falls below a configurable threshold, avoiding unnecessary display on short pages.
- Dispatches custom JavaScript events that expose the reading progress in real time as a percentage, allowing developers to hook into and respond to user scroll behavior programmatically.
Usage
- Download and extract to the module folder or install it using
composer. - Navigate to path
/admin/modulesand enable the Reading Progress Bar module. - Navigate to path
/admin/structure/blockand add a Reading Progress Bar block to the region of your choice.