What Is Reading Progress Indicator?
Reading Progress Indicator is typically a horizontal progress bar or text indicator that tells the user how far they've scrolled the webpage and/or displays the estimated time to finish reading your article and blog post.
The Best Reading Progress Indicator
Want to have a Reading Progress Indicator to improve the user experience on your long artice or blog post?
Originally Published Aug 02 2019, updated Feb 11 2020
Table of contents:
- jQuery Reading Progress Indicator Plugins
- Vanilla JS Reading Progress Indicators
- Pure CSS Reading Progress Indicators
- Bonus: Reading Time Estimate
jQuery Reading Progress Indicator Plugins:
ProngnRoll is a tiny jQuery plugin that creates a slim progress bar to indicate the scroll / reading progress of a specific scrollable container or the whole webpage.
Just another jQuery scroll progress indicator plugin which keeps track of scroll events and visualizes the scroll depth into a slim progress bar at the top of the webpage.
The readingBar jQuery plugin generates a slim bottom bar that auto updates on scroll to indicate the current reading progress of a given article or post.
An useful & human-friendly jQuery plugin for auto creating a table of contents for your long content page that comes with auto-update scrolling bars to present the progress while reading.
Scroll Indicator is a super tiny jQuery plugin for creating a slim, responsive reading progress bar that increases with the scroll of the container. The plugin will automatically re-calculate values on window.resize event whatever you resize the browser window.
Vanilla JS Reading Progress Indicators:
A minimalist page scroll indicator to visualize the scroll position (how much the user has scrolled) in a slim progress bar. Fully customizable via CSS.
Pure CSS Reading Progress Indicators:
A pure CSS solution to create a fixed header progress bar indicating how far you have scrolled. Powered by @supports CSS at-rule.
A minimal jQuery plugin for calculating the read time for the words and images and displaying an estimated time on your web page.