Smoothly Animated Scroll Progress Bar – page-progress

Category: Javascript | December 14, 2018
Views Total:3,222 views
Official Page:Go to website
Last Update:December 14, 2018


Smoothly Animated Scroll Progress Bar – page-progress


The page-progress library creates an animated and sticky progress bar to visualize how far you scroll down the webpage.

Also can be used as a reading progress indicator that shows how much content is left without reading.

How to use it:

Download the page-progress plugin and insert the following JavaScript file into the webpage.

<script src="dist/js/page-progress.js"></script>

Create an empty container to hold the progress bar.

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

Initialize the page-progress library to generate a default progress bar in the container you just created.


Customize the progress bar by passing the following options to the pagePrgoress function.

    // background color
    color: '#03A9F4',
    // height
    size: '5px',
    // or 'botton'
    position: 'top',
    // animation speed
    speed: '500'

You Might Be Interested In:

Leave a Reply