10 Best Reading Progress Indicators In JavaScript & CSS (2022 Update)
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?
Here is a list of 10 best reading progress indicators implemented in jQuery, Vanilla JavaScript or Pure CSS. Let's get started!
Originally Published Aug 02 2019, updated Feb 18 2022
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:
Sticky Reading Progress Nav Bar With Smooth Scroll Support
A fancy responsive sticky reading progress bar to indicate how much of the main content has been read based on a user's scroll position. Written in jQuery JavaScript library.
Sticky Scrolling/Reading Progress Indicator With jQuery
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.
Visualize Reading Progress Using Bootstrap Progressbar
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.
Reading Progress Indicator That Follows Your Cursor
A jQuery/CSS/SVG based circular reading progress indicator that automatically updates on page scroll and always follows your cursor.
Fixed Top Progress Bar For Reading/Scroll Progress
A super tiny (less than 1kb) and easy-to-use jQuery plugin to create a fixed top progress bar representing the current scroll & reading position of your article or the entire webpage.
Vanilla JS Reading Progress Indicators:
Page Scroll Reading Progress Indicator with Progress.js
A small JavaScript library that generates an animated, circular, SVG based progress bar to indicate the reading progress as you scroll down the page.
wavescrollbar
A standalone JavaScript library that creates an animated, striped top progress bar to indicate the reading time & scroll position in your document.
scrollprogressJS
Yet another JavaScript library to create a sticky top(or bottom) progress bar which can be used to visualize the current scroll position (reading progress) on the webpage.
Tiny Reading Progress Indicator With Pure JavaScript – rpbar.js
A very small JavaScript library used to display a top progress bar indicating the reading progress about your web content within a specific container.
Pure CSS Reading Progress Indicators:
Pure CSS Scroll Depth Indicator
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
reading-time.js
A small JavaScript plugin to display the estimated time to read an article, blog post or any text block based on the custom words per minute.
Medium Inspired jQuery Read Time Estimating Plugin - readtime
A minimal jQuery plugin for calculating the read time for the words and images and displaying an estimated time on your web page.
Calculate Readablity & Reading Time Of Text - readability.js
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.
Conclusion:
Looking for more jQuery plugins or JavaScript libraries to create awesome Reading Progress Indicator on the web & mobile? See jQuery Reading Progress Indicator and JavaScript/CSS Reading Progress Indicator sections for more details.
