Reading & Scrolling Progress Indicator with jQuery - Scroll Indicator

Scroll Indicator is a super tiny jQuery plugin for creating a slim, responsive reading progress bar that increases with the scroll of the container. The plugin will automatically re-calculate values on window.resize event whatever you resize the browser window.

How to use it:

1. Place jQuery library together with the jQuery scroll indicator plugin's script at the bottom of the html page.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/scrollindicator.jquery.min.js"></script>

2. Call the function on document ready to render a basic reading / scrolling progress indicator at the top of your webpage.

$.scrollIndicator();

3. Apply your own CSS styles to the indicator.

.scrollindicator, .scrollindicator-ie {
  width: 100%;
  height: 10px;
  display: block;
  border: none;
  z-index: 500;
  background: #eee;
  color: #337ab7;
}

progress.scrollindicator, progress.scrollindicator-ie {
  margin-bottom: 20px;
  position: fixed;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
 progress.scrollindicator::-webkit-progress-bar, progress.scrollindicator-ie::-webkit-progress-bar {
 background-color: transparent;
}
 progress.scrollindicator::-webkit-progress-value, progress.scrollindicator-ie::-webkit-progress-value {
 background-color: #337ab7;
}
 progress.scrollindicator::-moz-progress-bar, progress.scrollindicator-ie::-moz-progress-bar {
 background-color: #337ab7;
}

.scrollindicator-ie span {
  width: 100%;
  height: 100%;
  display: block;
  text-indent: -9999px;
  background: #337ab7;
}

4. Customize the plugin with the following options.

$.scrollIndicator({

  // Time in miliseconds between interaction
  delay: 100,

  // Support for IE8 and IE9 browsers.
  ieSupport: true,

  // Re-calculate values on window.resize event.
  bindResize: true,

  // React to changes in DOM model.
  bindDOMSubtreeModified: false,

  // Enable smooth animation
  animated: true,

  // Use of progress element. Disable for CSS3 animation.
  html5: false,
  
});

Change log:

2016-01-16

• v0.6: added smooth animations

---

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