jQuery Plugin For Simple Scroll Position Indicator - Scrolline.js

Scrolline.js is a simple jQuery plugin that creates a dynamic progress bar for your audiences to indicate the reading/scroll position. More examples can be found in the zip.

See also:

• Creating A Circular Reading Progress Indicator with jQuery and SVG
• jQuery Plugin For Easy Scroll Depth Detection - Scroll Detection
• Detect The Distance The User Has Scrolled With jQuery

How to use it:

1. Include the jQuery Scrolline.js plugin after the jQuery library has been loaded.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.scrolline.js"></script>

2. Initialize the plugin to create a default reading/scroll position indicator at the top of your web page.

$(function() {
  $.scrolline();
});

3. Available options to customize the reading/scroll position indicator.

// background color of your indicator
backColor   : '#ecf0f1',

// 'horizontal' or 'vertical' indicator
direction   : 'horizontal',

// front color of your indication
frontColor  : '#2ecc71',

// 0-1
opacity     : 1,

// top and bottom for horizontal's position,
// left or right for vertical's position
position    : 'top',

// reverse the indicator
reverse     : false,

// indicator size
weight      : 5,

// z-index
zindex      : 10,

// Callback's function call at the end of scrolling
scrollEnd   : function() {}

---

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