Slim Reading Progress Bar For Article - readingBar

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.