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

Originally Published Aug 02 2019, updated Feb 28 2021

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.

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

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

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

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

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

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

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

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

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

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

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

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

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