10 Best Reading Progress Indicators In JavaScript & CSS (2021 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. Have fun.

Originally Published Aug 02 2019, updated Feb 28 2021

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]


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]


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]


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]


Reading & Scrolling Progress Indicator with jQuery - Scroll Indicator

Scroll Indicator is a super tiny jQuery plugin for creating a slim, responsive reading progress bar that increases with the scroll of the container.

Reading & Scrolling Progress Indicator with jQuery - Scroll Indicator

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


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]


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:

Want more jQuery plugins or JavaScript libraries to create awesome Reading Progress Indicator on the web & mobile? Check out the jQuery Reading Progress Indicator and JavaScript/CSS Reading Progress Indicator sections.