jQuery Plugin For Page Scroll Progress Bar

File Size: 5.75 KB
Views Total: 5127
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


4. Available options.


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

  // height
  height: '10px',

  // CSS position property
  position: 'fixed'



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