<div class="scrollBar1"><span></span></div>

<div class="scrollBar2"><span></span></div>


<!-- Presentation stuff -->
<div>
    <svg class="scroll-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="-285 377 40 40" xml:space="preserve">
        <g id="scroll"> 
            <g>
                <path class="st0" d="M-265,388.1c-0.9,0-1.6,0.7-1.6,1.6v4.1c0,0.9,0.7,1.6,1.6,1.6s1.6-0.7,1.6-1.6v-4.1
                C-263.4,388.8-264.1,388.1-265,388.1" />
            </g>
        </g>
        <g id="wheel">
            <g>
                <path class="st0" d="M-264,378.2h-1.9c-6.2,0.5-10.9,5.5-10.9,11.6v14.3c0,6.5,5.3,11.7,11.8,11.7
                s11.8-5.3,11.8-11.7v-14.3C-253.1,383.7-257.9,378.7-264,378.2z M-255.1,404.2c0,5.4-4.4,9.8-9.9,9.8c-5.4,0-9.9-4.4-9.9-9.8
                v-14.4c0-5.4,4.5-9.8,9.9-9.8s9.9,4.4,9.9,9.8V404.2z" />
            </g>
        </g>
    </svg>
    <h1>Scroll Progress Bar</h1>
    <h2>Horizontal & Vertical versions</h2>
</div>
:root {
    // Try different transitions for some interesting effects
    
    --timing: ease;
    // --timing: cubic-bezier(0.705, 0.785, 0.555, 1.3);
    // --timing: linear;
    // --timing: none;
}

.scrollBar1 {
  position: fixed;
  top: 95vh;
  height: 2px;
  width: 0%;
  background: goldenrod;
  transition: width 200ms var(--timing);
  text-align: right;
  color: #fff;
  span {
    position: absolute;
    top: -23px;
    right: 15px;
    font-size: 0.7em;
    font-weight: 500;
    display: block;
    text-align: center;
    &::after {
      content: "%";
      font-size: 0.8em;
      position: absolute;
      right: -15px;
      bottom: 4px;
      font-weight: 700;
      opacity: 0.4;
    }
  }
}

.scrollBar2 {
  position: fixed;
  top: 0;
  right: 2vw;
  height: 0%;
  width: 10px;
  background: #49e;
  transition: height 200ms var(--timing);
  text-align: right;
  color: #fff;
  display: flex;
  align-items: center;
  border-radius: 1em;
  span {
    position: absolute;
    bottom: 3px;
    left: 2px;
    font-size: 0.7em;
    font-weight: 500;
    display: inline-block;
    text-align: left;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom left;
    &::after {
      content: "%";
      font-size: 0.8em;
      position: absolute;
      right: -15px;
      bottom: 4px;
      font-weight: 700;
      opacity: 0.4;
    }
  }
}

body {
  position: relative;
  overflow-x: hidden;
  height: 200vh;
  width: 100%;
  background: linear-gradient(
    0deg,
    #111 33%,
    #151515 33%,
    #151515 66%,
    #111 66%
  );
  display: flex;
  align-items: center;
  text-align: center;
  color: #ccc;
  > div {
    position: absolute;
    top: 35vh;
    font-size: 2em;
    display: block;
    text-align: center;
    width: 100vw;
  }
}

.st0 {
  fill: #ffffff;
}

h1,
h2,
h3 {
  margin: 0 0 1em;
}

h1 {
  font-size: 1.2em;
}
h2 {
  color: #666;
  font-size: 0.8em;
}
h3 {
  color: #777;
  font-size: 0.6em;
}
View Compiled
$(document).scroll(function (e) {
  var scrollAmount = $(window).scrollTop();
  var documentHeight = $(document).height();
  var windowHeight = $(window).height();
  var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
  var roundScroll = Math.round(scrollPercent);
  
  // For scrollbar 1
  $(".scrollBar1").css("width", scrollPercent + "%");
  $(".scrollBar1 span").text(roundScroll);
  
  // For scrollbar 2
  $(".scrollBar2").css("height", scrollPercent + "%");
  $(".scrollBar2 span").text(roundScroll);
});


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js