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 28 2021
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 jQuery/CSS/SVG based circular reading progress indicator that automatically updates on page scroll and always follows your cursor.
A simple script for creating a fixed progress bar with the current percent text that auto updates on scroll to representing the current scroll position.
This is a small jQuery script that creates a sticky progress bar to visualize the current reading progress of a given article or the whole webpage.
Scroll Indicator is a super tiny jQuery plugin for creating a slim, responsive reading progress bar that increases with the scroll of the container.
Vanilla JS Reading Progress Indicators:
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.