Scroll indicator is a tutorial on how to create a thin, thin progress bar using jQuery / CSS to indicate the extent to which the page scrolled down.
Especially suitable for long articles or blog posts to indicate reading progress in an intuitive way.
Must Read: jQuery Plugin To Display Scroll Reading Progress Indicator
How to make use of it:
1. Create the HTML for the scroll progress bar.
<div class="indicator-wrapper"> <div class="indicator"></div> </div>
2. Include the jQuery library on the web page.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
$(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 + "%"); }); });
3. Apply your CSS types 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; }
See Demo And Download
Official Website(shahabes):Click Here
This superior jQuery/javascript plugin is developed by shahabes. For extra Advanced usage, please go to the official website.