Customizable Reading Progress Plugin For jQuery - article-progress

article-progress is a jQuery plugin used to create custom progress bars that indicate the current reading progress of a given article & blog post or the whole webpage.

How to use it:

1. Link to jQuery library and the jQuery article-progress plugin's script:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.article-progress.js"></script>

2. Create a default reading progress bar at the top of the viewport. That's it.

$('article').articleProgress();

3. To generate the progress bar with custom styles inside a given container.

<div class="ap-width"><div></div></div>

.ap-width {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 20px;
  background: #fff;
  border: 1px solid #aaa;
}

.ap-width > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: red;
}

$('article').articleProgress({
  target: '.ap-width>div'
});

4. If you want to display the scroll progress as text:

<div class="ap-text"></div>

.ap-text {
  position: fixed;
  top: 50px;
  left: 20px;
  height: 20px;
  width: 100px;
  text-align: center;
  padding: 2px;
  line-height: 1;
  font-size: 13px;
  background: #fff;
  border: 1px solid #aaa;
}

$('article').articleProgress({
  target: '.ap-text',
  mode: 'text'
});

5. To create a circular reading progress indicator:

<div class="ap-circle"></div>

.ap-circle {
  position: fixed;
  width: 50px;
  height: 50px;
  right: 20px;
  bottom: 20px;
  border-radius: 50%;
  background-color: green;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

$('article').articleProgress({
  target: '.ap-circle',
  mode: 'circle',
  circleFg: 'green',
  circleBg: 'white'
});

---

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