Jquery progress indicator on page scroll

Today we will talk about creating a progressbar while we page scroll down or up without knowing the advance knowledge of JavaScript or Jquery. This plugin will explain to you how much page portion of we have read. It is also very handy and effective to the beginners. It works like reading indicator for our long webpage to indicate the scroll page we are viewing.

Basic Usage:

1. The Markup

The markup for our example page is going to be very plain. We have added alot of dummy text in the demo page for scroll. You can use any selector for progressbar scroll on the page.

* HTML markup

2. Progressbar CSS

Not required any css for progressbar


3. Include jQuery library and jquery-scrollbar.js in your head section or footer section of the page.

* Include library

4. Initialize jquery-scrollbar

5. Options and methods.

* Additional options and methods.
* Jquery Pages Scroll Progressbar addition setting
* Progressbar color, Progressbar thickness, Progressbar postion
* Progressbar position: fixed, absolute, relative
$("#progress-bar").onscroll({backgroundColor: 'red', height: '5px', position: 'fixed'});

Download Source file DEMO