Page Scroll Progress Indicator With jQuery Script

File Size: 11.42 KB
Views Total: 839 views
Last Update:November 20, 2021
Publish Date: February 27, 2021
Official Website: Go to website
License: MIT
Plugin Author: shahabes
Demo    Download

A nice scroll indicator with jQuery on web page. indicate scroll view when user read & scroll down on page. helpful for long article on web page or read blog other sites can be used.

How to use:

Add the jQuery library on the page :

<script src="/path/to/cdn/jquery.slim.min.js"></script>

Create the HTML for the scroll progress bar :

<div class="indicator-wrapper">
  <div class="indicator"></div>

Add Script for page scroll event, calculate the percentage of page scroll :

$(document).ready(() => {
  //add a listener for scroll
  $(window).scroll(() => {

    //get article's height
    let docHeight = $(".article").height();

    //get window height
    let winHeight = $(window).height();

    //calculate the view port
    let viewport = docHeight - winHeight;

    //get current scroll position
    let scrollPos = $(window).scrollTop();

    //get current scroll percent
    let scrollPercent = (scrollPos / viewport) * 100;

    //add the percent to the top progress bar
    $(".indicator").css("width", scrollPercent + "%");

Apply CSS styles to the scroll progress bar :

.indicator-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 5px;

.indicator {
  width: 0;
  height: 100%;
  background-color: #4F46E5;
  box-shadow: 0 2px 5px #4F46E5;


List Of Version :


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.