<div class="header"></div>

<!-- Progress Bar -->
<div class="progress-wrap progress sticky">
  <div class="progress-bar progress"></div>
</div>

<!-- Blog Post -->

<div class="page-center">
  <div class="blog-section">
    <div class="blog-post-wrapper">
      <h1>Sample Blog Post </h1>
      <h2>Some sample text so that you can test the reading progress bar functionality</h2>
      <br>
      <hr>
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat nibh in tellus lobortis molestie. Suspendisse malesuada tempor finibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque
        ultricies dignissim nunc, non viverra lectus egestas ut. Morbi pharetra ante diam, sed cursus massa faucibus id. Nullam auctor sapien in imperdiet hendrerit. Morbi molestie sapien quam. Quisque porttitor felis sit amet mattis consectetur. Integer
        vitae leo ultricies tellus mollis fermentum et sit amet ex. Vivamus euismod ipsum eget nisi porta pellentesque. Curabitur non tellus ac erat pellentesque rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat nibh
        in tellus lobortis molestie. Suspendisse malesuada tempor finibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque ultricies dignissim nunc, non viverra lectus egestas ut. Morbi pharetra ante
        diam, sed cursus massa faucibus id. Nullam auctor sapien in imperdiet hendrerit. Morbi molestie sapien quam. Quisque porttitor felis sit amet mattis consectetur. Integer vitae leo ultricies tellus mollis fermentum et sit amet ex. Vivamus euismod
        ipsum eget nisi porta pellentesque. Curabitur non tellus ac erat pellentesque rhoncus.</p>

      <p>Phasellus quis metus vel magna commodo efficitur vitae tempor lorem. Aliquam tellus orci, bibendum quis venenatis ut, ornare in felis. Nam eget nibh neque. In sit amet ligula ante. Ut in mattis purus. Suspendisse non erat sit amet libero porttitor
        sollicitudin. Nullam accumsan fringilla lorem, quis luctus ex venenatis sed. Donec volutpat ante a quam aliquet, at sodales nulla blandit. Mauris laoreet ex tellus. Vestibulum faucibus sapien quis turpis placerat consequat. Pellentesque egestas
        justo nulla, ac hendrerit elit placerat non. Donec lacus diam, lacinia a varius in, rhoncus et leo. Nunc vel nulla vitae turpis iaculis suscipit. Nam imperdiet ligula in laoreet tempus. Sed quis nisi id nunc euismod gravida.</p>

      <p>Nam et cursus velit, auctor efficitur elit. Aliquam eu sagittis massa. Etiam fermentum tincidunt mauris, vestibulum tincidunt enim gravida ut. Cras faucibus ultrices quam, non semper lacus rhoncus non. Maecenas auctor tempor diam in cursus. Vestibulum
        tincidunt varius tellus, ac placerat sapien rhoncus porttitor. Praesent quam magna, vestibulum ut consectetur nec, tincidunt vel augue. In elementum placerat erat quis rhoncus. Sed volutpat sit amet nunc in aliquam. Phasellus tempus porttitor
        bibendum. Pellentesque quis leo quis mi consequat commodo id sit amet nisi. Praesent in sapien elit. Phasellus tellus nulla, porta ut tortor eu, fermentum ornare lacus. Nunc pellentesque quis nibh non venenatis. Ut venenatis in elit sed commodo.</p>

      <p>Aenean erat eros, ullamcorper et arcu vitae, auctor laoreet ex. Fusce quis tortor sit amet lorem vulputate semper. Fusce erat lacus, laoreet at ornare ac, suscipit efficitur diam. Pellentesque non nibh eu elit luctus mollis in sit amet tortor. Ut
        ac nunc at urna feugiat gravida. Integer pretium tincidunt magna a porttitor. Praesent posuere metus diam, quis finibus sem suscipit in. Pellentesque pharetra vitae mauris id convallis. Nam mattis ultricies ex quis hendrerit. Vestibulum gravida
        laoreet ante non porttitor. Vestibulum sed condimentum urna. Cras neque neque, scelerisque vitae finibus in, lacinia quis risus. In auctor ut elit at aliquet. Duis hendrerit ultricies nunc ac egestas.</p>

      <p>Quisque auctor ipsum nec sapien tempus sagittis. Phasellus pharetra sem non vestibulum blandit. Donec sed magna vitae mi eleifend eleifend id in lectus. Aliquam sollicitudin faucibus ultricies. Nulla eget urna ut ex tristique accumsan ut eget dolor.
        Quisque nec mattis massa, et congue metus. Vivamus venenatis orci vel volutpat dignissim. Nullam sit amet blandit turpis, eget tincidunt ligula. Aliquam quis arcu vitae metus cursus dignissim. Donec vitae metus vel dui mollis viverra. Nam faucibus
        dapibus lectus. Fusce velit tortor, ornare ut volutpat at, dignissim ut ipsum. Cras consectetur ante vehicula congue lacinia. Ut lobortis id dui a sollicitudin. Maecenas dictum in arcu quis accumsan. Morbi ut ipsum tincidunt elit lacinia hendrerit
        et aliquet magna.</p>

      <p>Phasellus quis metus vel magna commodo efficitur vitae tempor lorem. Aliquam tellus orci, bibendum quis venenatis ut, ornare in felis. Nam eget nibh neque. In sit amet ligula ante. Ut in mattis purus. Suspendisse non erat sit amet libero porttitor
        sollicitudin. Nullam accumsan fringilla lorem, quis luctus ex venenatis sed. Donec volutpat ante a quam aliquet, at sodales nulla blandit. Mauris laoreet ex tellus. Vestibulum faucibus sapien quis turpis placerat consequat. Pellentesque egestas
        justo nulla, ac hendrerit elit placerat non. Donec lacus diam, lacinia a varius in, rhoncus et leo. Nunc vel nulla vitae turpis iaculis suscipit. Nam imperdiet ligula in laoreet tempus. Sed quis nisi id nunc euismod gravida.</p>

      <p>Nam et cursus velit, auctor efficitur elit. Aliquam eu sagittis massa. Etiam fermentum tincidunt mauris, vestibulum tincidunt enim gravida ut. Cras faucibus ultrices quam, non semper lacus rhoncus non. Maecenas auctor tempor diam in cursus. Vestibulum
        tincidunt varius tellus, ac placerat sapien rhoncus porttitor. Praesent quam magna, vestibulum ut consectetur nec, tincidunt vel augue. In elementum placerat erat quis rhoncus. Sed volutpat sit amet nunc in aliquam. Phasellus tempus porttitor
        bibendum. Pellentesque quis leo quis mi consequat commodo id sit amet nisi. Praesent in sapien elit. Phasellus tellus nulla, porta ut tortor eu, fermentum ornare lacus. Nunc pellentesque quis nibh non venenatis. Ut venenatis in elit sed commodo.</p>

      <p>Aenean erat eros, ullamcorper et arcu vitae, auctor laoreet ex. Fusce quis tortor sit amet lorem vulputate semper. Fusce erat lacus, laoreet at ornare ac, suscipit efficitur diam. Pellentesque non nibh eu elit luctus mollis in sit amet tortor. Ut
        ac nunc at urna feugiat gravida. Integer pretium tincidunt magna a porttitor. Praesent posuere metus diam, quis finibus sem suscipit in. Pellentesque pharetra vitae mauris id convallis. Nam mattis ultricies ex quis hendrerit. Vestibulum gravida
        laoreet ante non porttitor. Vestibulum sed condimentum urna. Cras neque neque, scelerisque vitae finibus in, lacinia quis risus. In auctor ut elit at aliquet. Duis hendrerit ultricies nunc ac egestas.</p>

      <p>Quisque auctor ipsum nec sapien tempus sagittis. Phasellus pharetra sem non vestibulum blandit. Donec sed magna vitae mi eleifend eleifend id in lectus. Aliquam sollicitudin faucibus ultricies. Nulla eget urna ut ex tristique accumsan ut eget dolor.
        Quisque nec mattis massa, et congue metus. Vivamus venenatis orci vel volutpat dignissim. Nullam sit amet blandit turpis, eget tincidunt ligula. Aliquam quis arcu vitae metus cursus dignissim. Donec vitae metus vel dui mollis viverra. Nam faucibus
        dapibus lectus. Fusce velit tortor, ornare ut volutpat at, dignissim ut ipsum. Cras consectetur ante vehicula congue lacinia. Ut lobortis id dui a sollicitudin. Maecenas dictum in arcu quis accumsan. Morbi ut ipsum tincidunt elit lacinia hendrerit
        et aliquet magna.</p>
    </div>
  </div>
</div>

<div class="footer"></div>
@import url('https://fonts.googleapis.com/css?family=Lato|Raleway');

/* Progress Bar CSS */

div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.progress {
  width: 100%;
  height: 25px; /* Bar Height */
}

.progress-wrap {
  background: #fee202; /* Bar Colour */
  margin: 0;
  overflow: hidden;
  position: fixed; 
}
.progress-wrap .progress-bar {
  background: #f2f2f2; /* Background Colour */
  left: 0;
  position: absolute;
  top: 0;
}


/* General CSS */
body {
  margin: 0;
}

.header, .footer {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 150px;
  background-color: #3EB597;
}

.page-center{
  float:none;
  max-width:650px;
  margin:0 auto;
}

.blog-section {
  padding: 60px 20px;
}

h1, h2 {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  color: #323232;
}

p {
  font-family: 'Lato', sans-serif;
  color: #666666;
  line-height: 1.75;
  font-size: 16px;
  letter-spacing: 1px;
}
$(window).scroll(function() {
  
  // Variables
  var height = $(document).height() - $(window).height(); 
  var scroll  = $(window).scrollTop();
  console.log("Scroll: "+ scroll + "Height: "+ height);
  
  // Read percent calculation
  var readPercent = (scroll / height) * 100;
  console.log("Read Percent: " + readPercent);
  
  // Set progress bar width to read percent
  if (readPercent > 0) {
    $(".progress-bar").css("left", readPercent + "%");
  }

});

// Ideally it shoudld start and end with blog-section (TO DO)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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