Fixed Top Progress Bar For Reading/Scroll Progress

A super tiny (less than 1kb) and easy-to-use jQuery plugin to create a fixed top progress bar representing the current scroll & reading position of your article or the entire webpage.

See Also:

• 10 Best Reading Progress Indicators In JavaScript & CSS

How to use it:

1. Load the minified version of the top progress bar plugin after loading the latest jQuery JavaScript library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/top-progress-bar.min.js"></script>

2. Call the function topProgressBar on the target container where you wish to detect the scroll/reading progress.

$(function(){
  $(document).topProgressBar({
    // options here
  });
});

3. Customize the background color of the top progress bar. Default: 'blue'.

$(function(){
  $(document).topProgressBar({
    bgColor: "red"
  });
});

4. Determine the height of the top progress bar. Default: '2px'.

$(function(){
  $(document).topProgressBar({
    height: "5px"
  });
});

---

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