Display progress bar on page scroll

<div class="container">
       <div id="progressBar"></div>
        <div class="page"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nulla ducimus sunt tempore eligendi beatae repudiandae sapiente excepturi. Amet, ex magnam obcaecati cum est! Illum nostrum sapiente natus quia, rerum.</p></div>
        
        <div class="page"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nulla ducimus sunt tempore eligendi beatae repudiandae sapiente excepturi. Amet, ex magnam obcaecati cum est! Illum nostrum sapiente natus quia, rerum.</p></div>
        <div class="page"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nulla ducimus sunt tempore eligendi beatae repudiandae sapiente excepturi. Amet, ex magnam obcaecati cum est! Illum nostrum sapiente natus quia, rerum.</p></div>
        <div class="page"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nulla ducimus sunt tempore eligendi beatae repudiandae sapiente excepturi. Amet, ex magnam obcaecati cum est! Illum nostrum sapiente natus quia, rerum.</p></div>
        
        <div class="page"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nulla ducimus sunt tempore eligendi beatae repudiandae sapiente excepturi. Amet, ex magnam obcaecati cum est! Illum nostrum sapiente natus quia, rerum.</p></div>
        <div class="page"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nulla ducimus sunt tempore eligendi beatae repudiandae sapiente excepturi. Amet, ex magnam obcaecati cum est! Illum nostrum sapiente natus quia, rerum.</p></div>
        <div class="page"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nulla ducimus sunt tempore eligendi beatae repudiandae sapiente excepturi. Amet, ex magnam obcaecati cum est! Illum nostrum sapiente natus quia, rerum.</p></div>
        
        <div class="page"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nulla ducimus sunt tempore eligendi beatae repudiandae sapiente excepturi. Amet, ex magnam obcaecati cum est! Illum nostrum sapiente natus quia, rerum.</p></div>
        <div class="page"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis nulla ducimus sunt tempore eligendi beatae repudiandae sapiente excepturi. Amet, ex magnam obcaecati cum est! Illum nostrum sapiente natus quia, rerum.</p></div>
    </div>

.container { width: 1170px; margin: auto;}
       .page { padding: 80px 0px 0px;}
       #progressBar { position: fixed; left:0; height: 10px; background-image:linear-gradient(120deg, #673AB7, #FF5722)}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(window).scroll(function(){
            var scroll = $(window).scrollTop(),
                width = $(window).height(),
                height = $(document).height(),               
                value = (scroll / (height-width))* 100;
            $('#progressBar').css('width', value + '%')
        })
    </script>