Easy Customizable Reading Progress Bar Plugin - jQuery Page-Progress

Page-Progress is a lightweight, easy-to-use, fully customizable, and fixed-position reading progress indicator plugin written in jQuery.

It calculates the percentage the user has scrolled down the page and then automatically update the width of the progress bar based on the current scroll percent.

In addition, the plugin provides a Bookmark function that remembers the current scroll percentage and automatically scrolls the page to that position on the next visit. 

See Also:

• 10 Best Reading Progress Indicators In JavaScript & CSS

How to use it:

1. Load jQuery library and the Page-Progress plugin's files in the document.

<link rel="stylesheet" href="/path/to/page-progress.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/page-progress.js"></script>

2. Create the HTML for the reading progress bar.

<div class="ppProgressBarContainer">
  <div class="ppProgressBar"></div>
</div>

3. Create a link to save the user's scroll position. OPTIONAL.

<a href="javascript:void(0);" class="ppBookmark">
  Save my place
</a>

4. Override the default styles of the reading progress bar.

.ppProgressBarContainer {
  background-color: rgba(0,0,0,.2); 
  height: 1em; 
  position: fixed;
  top: 0;
  width: 100%;
}

.ppProgressBar {
  background-color: darkblue;
  min-width: 1em; 
  height: 1em; 
  transition: width .25s ease-out;
  width: 1em; 
}

---

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