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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<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.

<article>
  ...
</article>

$('article').progressBar();

3. Change the appearance of the reading progress bar.

$('article').progressBar({

  // height in pixels
  progressBarHeight: 10,

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

  // fill color
  progressBarValueColor: '#E74C3C'

});

4. More configuration options.

$('article').progressBar({

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