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?
Table of contents:
- jQuery Reading Progress Indicator Plugins
- Vanilla JS Reading Progress Indicators
- Pure CSS Reading Progress Indicators
jQuery Reading Progress Indicator Plugins:
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.
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.
The jQuery Advanced Scroll Progress Tracker plugin automatically generates a fixed scroll progress indicator from heading elements and allows linking between them.
A super tiny jQuery plugin for creating a fixed progress bar to indicate the page scroll progress based on your content.
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.
Vanilla JS Reading Progress Indicators:
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.
Pure CSS Reading Progress Indicators:
A pure CSS solution to create a fixed header progress bar indicating how far you have scrolled. Powered by @supports CSS at-rule.
A minimal jQuery plugin for calculating the read time for the words and images and displaying an estimated time on your web page.