10 Best Reading Progress Indicators In JavaScript & CSS (2023 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 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:
jQuery Scroll Progress Indicator For Any Containers - Prognroll
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.
Top Scroll Progress Indicator Plugin With jQuery - Scrollgress
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.
Slim Reading Progress Bar For Article - readingBar
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.
Mouse Follow Scroll Position Indicator With JavaScript And CSS
A slim vertical progress bar with percentage value that always follows the cursor to indicate the user's current scroll position on a webpage.
Customizable Page Scroll Progress Indicator Plugin For jQuery
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:
Detect Scroll Position & Progress With Pure JavaScript – Update On Scroll
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.
Minimalist Scroll Position / Reading Progress Indicator – scrollpup.js
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.
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.
Slim Progressbar To Indicate How Far You Are Scrolling – sprogress.js
A JavaScript library to generate a scroll position progress bar that indicates the reading progress of an article/post.
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.
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.
