10 Best Reading Progress Indicators In jQuery/JavaScript/CSS

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.

Table of contents:

• jQuery Reading Progress Indicator Plugins
• Vanilla JS Reading Progress Indicators
• Pure CSS Reading Progress Indicators
• Bonus

jQuery Reading Progress Indicator Plugins:

jQuery Plugin For Animated Scroll Progress Bar - scrollProgress.js

Just another jQuery plugin for generating a top progress bar that auto fills up as the user scrolls to indicate the current scroll / reading position.

[Demo] [Download]

---

jQuery Plugin To Display A Reading Progress Indicator On Scroll

A jQuery plugin that creates a reading indicator for your long webpage to indicate the scroll progress and the current content section you're viewing.

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

[Demo] [Download]

---

jQuery Plugin For Page Scroll Progress Bar

A super tiny jQuery plugin for creating a fixed progress bar to indicate the page scroll progress based on your content.

[Demo] [Download]

---

Circular Scroll Progress Indicator with jQuery and CSS3 - progressScroll

A tiny jQuery plugin to create a CSS3 powered circular scroll progress indicator that auto updates based on the current vertical scroll position of the page.

[Demo] [Download]

---

Vanilla JS Reading Progress Indicators:

Page Scroll Reading Progress Indicator with Progress.js

Progress.js is 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]

---

Tiny Reading Progress Indicator With Pure JavaScript – rpbar.js

rpbar.js is a very small JavaScript library used to display a top progress bar indicating the reading progress about your web content within a specific container.

[Demo] [Download]

---

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]

---

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]

---

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.