Page Scroll Progress Indicator With jQuery Script

Slim Scroll Progress Indicator With jQuery
File Size: 11.42 KB
Views Total: 1676 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;


Thanks for make jQuery plugin is developed by shahabes For more Helpfull for users, please check the demo page or visit the official website.
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.

Related jQuery Plugins