10 Best Reading Progress Indicators In JavaScript & CSS (2023 Update)

by jQueryScript,

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:

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.

jQuery Scroll Progress Indicator For Any Containers - Prognroll

[Demo] [Download]


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.

Top Scroll Progress Indicator Plugin With jQuery - Scrollgress

[Demo] [Download]


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.

Slim Reading Progress Bar For Article - readingBar

[Demo] [Download]


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.

Mouse Follow Scroll Position Indicator With JavaScript And CSS

[Demo] [Download]


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.

Customizable Page Scroll Progress Indicator Plugin For jQuery

[Demo] [Download]


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.

Detect Scroll Position & Progress With Pure JavaScript – Update On Scroll

[Demo] [Download]


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.

Minimalist Scroll Position / Reading Progress Indicator – scrollpup.js

[Demo] [Download]


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.

Page Scroll Reading Progress Indicator with Progress.js

[Demo] [Download]


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.

Slim Progressbar To Indicate How Far You Are Scrolling – sprogress.js

[Demo] [Download]


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.

Scroll (Reading) Progress Indicator In Vanilla JavaScript – scrollprogressJS

[Demo] [Download]


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.

Pure CSS Scroll Depth Indicator

[Demo] [Download]


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.

reading-time.js

[Demo] [Download]


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.

Medium Inspired jQuery Read Time Estimating Plugin - readtime

[Demo] [Download]


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.

Calculate Readablity & Reading Time Of Text - readability.js

[Demo] [Download]


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.