10 Best Reading Progress Indicators In JavaScript & CSS (2020 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 artice 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 11 2020

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

ProngnRoll is 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.

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

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

[Demo] [Download]

---

jQuery Table of Contents with Reading Progress Indicators

An useful & human-friendly jQuery plugin for auto creating a table of contents for your long content page that comes with auto-update scrolling bars to present the progress while reading.

[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. The plugin will automatically re-calculate values on window.resize event whatever you resize the browser window.

[Demo] [Download]

---

Vanilla JS Reading Progress Indicators:

Minimal Horizontal Scroll Progress Bar With Pure JavaScript – skunkScroll

skunkScroll is a JavaScript library to create a responsive horizontal scrollbar which can be used to keep track of the scroll progress when scrolling down the webpage.

[Demo] [Download]

---

Minimal Page Scroll Position Indicator – youAreHere.js

youAreHere.js is a very small (~1kb minified) JavaScript library for generating an auto-update progress bar that indicates where are you when you scroll down or up the web page.

[Demo] [Download]

---

Minimalist Scroll Progress Indicator In Pure JavaScript – pageScrollIndicator.js

A minimalist page scroll indicator to visualize the scroll position (how much the user has scrolled) in a slim progress bar. Fully customizable via CSS.

[Demo] [Download]

---

Custom Scroll Progress Indicator Bar – uScroll

uScroll is a lightweight and standalone JavaScript plugin to create a custom reading progress bar that tracks the scroll events and auto updates the indicator bar depending on the current scroll position.

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

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]

---

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.