Tiny Reading Progress Indicator With Pure JavaScript – rpbar.js

Category: Javascript , Loading | September 7, 2016
Author: TheTomasJ
Views Total: 1,497
Official Page: Go to website
Last Update: September 7, 2016
License: MIT

Preview:

Tiny Reading Progress Indicator With Pure JavaScript – rpbar.js

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) -->

Leave a Reply