Tiny Reading Progress Indicator With Pure JavaScript – rpbar.js

Preview:

Description:

rpbar.js is a very small JavaScript library used to display a top progress bar indicating the reading progress about your web content within a specific container.

How to use it:

Download and unzip the rpbar.js, then include the following files onto your webpage:

<link rel="stylesheet" href="rpbar-1.0.min.css">
<script src="rpbar-1.0.min.js"></script>

Create a placeholder element for the reading progress indicator.

<div id="rp-bar"></div>

Wrap the web content where you want to listen for the scroll events into DIV containers as follows:

<div id="rp-start"></div>
 <!-- MARK START OF SCROLLABLE CONTENT (OPTIONAL) -->
<p>content starts here (bar is visible)</p>
<div id="rp-end"></div> 
<!-- MARK END OF SCROLLABLE CONTENT (OPTIONAL) -->