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="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.

  • Publication date: 19.02.2018
  • Source