Scroll Indicator Progress Bar Top of Page – PageProgress.js

Do you want to implement an animated progress bar top of the page when the user scroll down to the page? This plugin PageProgress.js is perfect for such small functionality. It’s a Javascript tiny plugin which shows a progress bar according to section or DIV scroll down.

When a user scrolls the page to down, A progress bar on top of the browser will show up and as they go down, it will stay at the top of the page and fill out.

It is a simple animated page progress bar which is compatible with more of the major browsers and works well with Android smart devices.

This page-progress library allows you to create an animated and sticky bar to visualize how far you scroll down to the page. It can be used as a reading indicator progress bar which shows how much content is left without reading.

How to Add Scroll Indicator Progress Bar

The setup is quite simple and easy. All you need to download the source code and add the Javascript file into your webpage

<script src="/path/to/page-progress.min.js"></script>

Next, You need to add an empty container and place it at the top of your HTML document, Just right below the closing head tag.

<div class="page-progress"></div>

Then via javascript, You need to pass the element selector to the page progress function.

(function(){
  pagePrgoress('.page-progress');
})()

It provides you few of cool options which allow you to customize it as per your design need. It accepts two different parameters, the selector and the progress bar options.

The selector, of course, you need to define the class name which you will use for DIV. As for option concerns, You can define color, size, speed, and even position.

(function(){
  var options = {
    color: '#03A9F4',
    size: '5px',
    position: 'top',
    speed: '500',
  }
  pagePrgoress('.page-progress' , options);
})()