Slim Reading Progress Bar For Article - readingBar
File Size: | 6.36 KB |
---|---|
Views Total: | 1098 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The readingBar jQuery plugin generates a slim bottom bar that auto updates on scroll to indicate the current reading progress of a given article or post.
How to use it:
1. Load the main JavaScript file jquery.readingbar.js
after the latest jQuery library.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="jquery.readingbar.js"></script>
2. Call the function readingbar
on the target container in which you want to keep track of the reading progress.
<article> Article to track the reading progress </article>
$(function(){ $('article').readingbar(); });
3. Customize the height of the reading progress bar.
$('article').readingbar({ height: 8 });
4. Customize the fill color of the reading progress bar.
$('article').readingbar({ backgroundColor: '#22252C' });
5. Decide whether to show the counter that displays the current reading progress in percentage.
$('article').readingbar({ counter: true });
6. Apply extra CSS styles to the reading progress bar.
.read-bar { /* styles here */ } .read-text { /* styles here */ }
This awesome jQuery plugin is developed by Wixel. For more Advanced Usages, please check the demo page or visit the official website.