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 article or blog post?
Originally Published Aug 02 2019, updated Feb 11 2023
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:
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.
A slim vertical progress bar with percentage value that always follows the cursor to indicate the user's current scroll position on a webpage.
The jQuery Advanced Scroll Progress Tracker plugin automatically generates a fixed scroll progress indicator from heading elements and allows linking between them. It is highly customizable and has a built-in linking function, so it can be used as an interactive table of contents. Fully responsive and mobile-friendly.
Vanilla JS Reading Progress Indicators:
A scroll position listener which detects the current scroll position and/or progress and triggers certain functions as you scroll down or up the page.
The scrollpup.js library lets you create a top progress bar to visualize the reading progress of your page/article/post when scrolling down or up the webpage. Written in ES6.
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.
Bonus: Reading Time Estimating Plugins
A minimal jQuery plugin for calculating the read time for the words and images and displaying an estimated time on your web page.
Readability.js is a tiny jQuery plugin that predicts the difficulty level of your text and displays the reading level & estimated reading time of given articles or posts.