-->

Snippet for creating a progress bar

Snippet for creating a progress bar in the header section.

  <div class="header mt-100">
    <div class="row">
      <div class="progress">
        <div class="progress-bar" id="myBar"></div>
      </div>
    </div>
  </div>

  <script>
    // When the user scrolls the page, execute scrollFn 
    window.onscroll = function () { scrollFn() };

    function scrollFn() {
      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      document.getElementById("myBar").style.width = scrolled + "%";
    }
  </script>

bino kochumol varghese profile pic

Written By

Bino Kochumol Varghese

A software engineer who is a voracious reader and an active blogger.