JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<progress value="0" id="progressBar">
  <div class="progress-container">
    <span class="progress-bar"></span>
  </div>
</progress>
<p>I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I amI am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am text I am...

CSS

progress {
  /* Positioning */
  position: fixed;
  left: 0;
  top: 0;
  /* Dimensions */
  width: 100%;
  height: .25em;
  /* Reset the apperance */  
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* Get rid of the default border in Firefox/Opera. */
  border: none;
  /* For Firefox/IE10+ */
  background-color: transparent;
  /* For IE10+, color of the progress bar */
  color: red;
}
progress::-webkit-progress-bar {
  background-color: green;
}
progress::-webkit-progress-value {
  background-color: red;
}
progress::-moz-progress-bar {
  background-color: red;
}
.progress-container {
  width: 100%;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  height: .25em;
  display: block;
}
.progress-bar {
  background-color: red;
  width: 50%;
  display: block;
  height: inherit;
}

JavaScript

$(document).ready(function(){
  var getMax = function(){
    return $(document).height() - $(window).height();
  }
  var getValue = function(){
    return $(window).scrollTop();
  }
  if('max' in document.createElement('progress')){
    // Browser supports progress element
    var progressBar = $('progress');
    // Set the Max attr for the first time
    progressBar.attr({ max: getMax() });
    $(document).on('scroll', function(){
      // On scroll only Value attr needs to be calculated
      progressBar.attr({ value: getValue() });
    });
    $(window).resize(function(){
      // On resize, both Max/Value attr needs to be calculated
      progressBar.attr({ max: getMax(), value: getValue() });
    });   
  }
  else {
    var progressBar = $('.progress-bar'), 
        max = getMax(), 
        value, width;
    var getWidth = function(){
      // Calculate width in percentage
      value = getValue();            
      width = (value/max) * 100;
      width = width + '%';
      return width;
    }
    var setWidth = function(){
      progressBar.css({ width: getWidth() });
    }
    $(document).on('scroll', setWidth);
    $(window).on('resize', function(){
      // Need to reset the Max attr
      max = getMax();
      setWidth();
    });
  }
});