Scroll progress bar on top of page

scroll-progress-bar

//Scroll progress bar
$(document).ready(function() {
    $(window).on('scroll', function() {
        var docHeight = $(document).height(),
            winHeight = $(window).height();
        var viewport = docHeight - winHeight,
            positionY = $(window).scrollTop();
        var indicator = ( positionY / (viewport)) * 100;
        $('.scroll-bar').css('width', indicator + '%');
    });
});


//css

.scroll-bar {
  height: 5px;
  width: 10px;
  background-color: #08498F;
  position: fixed;
  z-index: 2;
}