Scroll progress bar

by Saksham Malhotra

HTML

<div class="pageProgressBar"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deleniti nobis accusamus assumenda sint delectus excepturi porro, veniam impedit. Omnis dicta molestiae tenetur facilis maiores ducimus dolorum iure, itaque iste.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deleniti nobis accusamus assumenda sint delectus excepturi porro, veniam impedit. Omnis dicta molestiae tenetur facilis maiores ducimus dolorum iure, itaque iste.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deleniti nobis accusamus assumenda sint delectus excepturi porro, veniam impedit. Omnis dicta molestiae tenetur facilis maiores ducimus dolorum iure, itaque iste.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deleniti nobis accusamus assumenda sint delectus excepturi porro, veniam impedit. Omnis dicta molestiae tenetur facilis maiores ducimus dolorum iure, itaque iste.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deleniti nobis accusamus assumenda sint delectus excepturi porro, veniam impedit. Omnis dicta molestiae tenetur facilis maiores ducimus dolorum iure, itaque iste.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deleniti nobis accusamus assumenda sint delectus excepturi porro, veniam impedit. Omnis dicta molestiae tenetur facilis maiores ducimus dolorum iure, itaque iste.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deleniti nobis accusamus assumenda sint delectus excepturi porro, veniam impedit. Omnis dicta molestiae tenetur facilis maiores ducimus dolorum iure, itaque iste.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deleniti nobis accusamus assumenda sint delectus excepturi porro, veniam impedit. Omnis dicta molestiae tenetur facilis maiores ducimus dolorum iure, itaque iste.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deleniti nobis accusamus...

CSS

body {
   scroll-behavior: smooth;
 }

 .pageProgressBar {
   position: fixed;
   top: 0;
   left: 0;
   height: 5px;
   background-color: orange;
   transition: width 0.1s ease-out;
 }

JavaScript

$(function() {
  $('document').on('scroll', () => {
    SetPageProgress();
  });
  SetPageProgress();
});

function SetPageProgress() {
  $('.pageProgressBar').css('width', ((document.body.clientHeight + $('body').scrollTop()) / $(window.top).height() * 100) + '%');
}