jQuery Plugin For Page Scroll Progress Bar

A super tiny jQuery plugin for creating a fixed progress bar to indicate the page scroll progress based on your content.

How to use it:

1. Create a container to place the page scroll progress indicator.

<div id="progress-bar"></div>

2. Include jQuery library and the jquery-scrollbar.js script at the bottom of your web page.

<script src="jquery.min.js"></script>
<script src="jquery-scrollbar.js"></script>

3. Initialize the plugin to generate a basic scroll indicator at the top of your web page.

$("#progress-bar").onscroll();

4. Available options.

$("#progress-bar").onscroll({

  // progress bar color
  backgroundColor: "#f00",

  // height
  height: '10px',

  // CSS position property
  position: 'fixed'
  
});

Changelog:

2018-12-04

• JS Update

---

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