JSFiddle - React, Tailwind, and code Playground

by tomik23

HTML

<div id="progress">
    <div class="bar"></div>
  </div>
  <div class="container">
    <h1>proggres bar test - <span>scroll</span></h1>
    <div class="lipsum">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu commodo orci, sed elementum massa. Nam sit amet
        elementum
        ipsum, eu laoreet metus. Aenean a ex vel erat aliquam imperdiet eu at justo. Nulla in lobortis tellus. Curabitur
        varius laoreet quam non facilisis. Etiam consequat purus elit, vel euismod ligula faucibus fringilla. Etiam
        cursus dui eros, non egestas nibh congue a. Nullam eu justo neque. Cras rutrum arcu elit. Quisque vestibulum
        et mi vel congue. Curabitur a ultrices ligula. Morbi enim ligula, euismod eu ornare id, pharetra et sapien.
        Sed aliquam, elit vitae aliquet iaculis, leo sapien rutrum ipsum, at fermentum nibh dolor ac risus.
      </p>
      <p>
        Nunc a orci auctor, ornare leo at, convallis neque. Mauris congue, massa ac faucibus aliquam, diam dui porta
        purus, sed consequat
        eros dolor ac ex. Vivamus augue orci, bibendum nec imperdiet sit amet, fringilla at lacus. Nullam condimentum
        dolor eu dolor consequat, a ullamcorper eros congue. Aliquam varius nec elit et posuere. In rutrum et mi
        a tristique. Praesent at magna a magna vestibulum vulputate. Ut vulputate, leo nec blandit fermentum, urna
        dolor efficitur erat, vitae aliquam risus diam eget libero.
      </p>
      <p>
        Phasellus vel augue quis felis lacinia fermentum. Donec laoreet mauris non orci tincidunt maximus. Curabitur
        mattis tincidunt
        eros, et pellentesque eros venenatis ut. Mauris eget justo nec leo maximus interdum. Vestibulum aliquet lorem
        commodo, semper enim bibendum, pretium nisi. Donec ultricies, nibh vitae dapibus porttitor, lorem nulla bibendum
        justo, et posuere orci tellus in nisl. Aenean volutpat dui et porttitor varius. Duis a magna luctus, porta
        sem...

CSS

.container {
  width: 100%;
  margin: 0 auto;
}


#progress {
  position: fixed;
  top: 1px;
  height: 10px;
  width: 100%;
  background: #ccc;
}

.bar {
  background: #4caf50;
  height: 10px;
  width: 0;
  top: 0;
}

h1 {
  text-transform: uppercase;
  margin: 20px 0;
}

h1 span {
  color: rgb(60, 177, 6);
}

p {
  margin-bottom: 10px;
}

JavaScript

function progressBarSetPercent() {
  const progressbar = document.querySelector('.bar');
  progressbar.setAttribute('style', 'width:' + getScrollPercent() + '%');
}

function progressBarOnScroll() {
  let position = document.documentElement.scrollTop;

  window.addEventListener('scroll', () => {
    let scrolls = document.documentElement.scrollTop;
    if (scrolls > position) {
      progressBarSetPercent();
    }
    position = scrolls;
  });
};

function getScrollPercent() {
  let ws = window.pageYOffset;
  let wh = window.innerHeight;
  let dh = document.body.clientHeight;
  let scrollPercent = Math.floor((ws / (dh - wh)) * 25);

  return scrollPercent;
}

window.addEventListener('DOMContentLoaded', function() {
  progressBarSetPercent();
  progressBarOnScroll();
});