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

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.