Sticky Reading Progress Bar With jQuery - progressBar.js

File Size: 5.57 KB
Views Total: 1624
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Sticky Reading Progress Bar With jQuery - progressBar.js

The progressBar.js jQuery plugin creates a sticky, customizable reading progress bar to visualize the remaining reading time of a given article or the whole webpage as you scroll down.

How to use it:

1. Import the latest jQuery library and the Reading Progress Bar plugin's files into your webpage.

<script src="" 
<script src="jQuery.progressBar.js"></script>

2. Just call the function progressBar on the target element where you want to keep track of the scroll progress.


3. Change the appearance of the reading progress bar.


  // height in pixels
  progressBarHeight: 10,

  // background color
  progressBarColor: '#34495E',

  // fill color
  progressBarValueColor: '#E74C3C'


4. More configuration options.


  // throttle time in milliseconds
  throttleTime: 100,

  // debounce time in milliseconds
  debounceTime: 200,

  // top offset in pixels
  progressBarTopPosition: 0


This awesome jQuery plugin is developed by michalwielgus. For more Advanced Usages, please check the demo page or visit the official website.