10 Best Reading Progress Indicators In JavaScript & CSS (2022 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 18 2022

Table of contents:

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 Reading Progress Nav Bar With Smooth Scroll Support

[Demo] [Download]


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.

Sticky Scrolling/Reading Progress Indicator With jQuery

[Demo] [Download]


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.

Visualize Reading Progress Using Bootstrap Progressbar

[Demo] [Download]


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.

Reading Progress Indicator That Follows Your Cursor

[Demo] [Download]


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.

Fixed Top Progress Bar For Reading/Scroll Progress

[Demo] [Download]


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.

Page Scroll Reading Progress Indicator with Progress.js

[Demo] [Download]


wavescrollbar

A standalone JavaScript library that creates an animated, striped top progress bar to indicate the reading time & scroll position in your document.

Animated Top Progress Bar For Reading Progress – wavescrollbar

[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]


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.

Tiny Reading Progress Indicator With Pure JavaScript – rpbar.js

[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.