Sticky Reading Progress Bar With jQuery - progressBar.js

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.

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.

  • Publication date: 19.02.2018
  • Source