HTML / JS / SCSS progress bar

ProgressBar.html

<progress value="0"></progress>

<style>
progress { width: 100%; height: 5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background-color: white;
  color: @green;
	z-index: 100;
	display: block;
	margin: 0;
	position: absolute;
	top: 60px;
	left: 0;
}

progress::-webkit-progress-bar {
  background-color: transparent;
}

progress::-webkit-progress-value {
  background-color: @green;
}

progress::-moz-progress-bar {
  background-color: @green;
}
</style>

<script>
$(document).on('ready', function() {
  var winHeight = $(window).height(),
      docHeight = $(document).height(),
      progressBar = $('progress'),
      max, value;

  if (progressBar.length < 1) { return; }

  /* Set the max scrollable area */
  max = docHeight - winHeight;
  progressBar.attr('max', max);

  $(document).on('scroll', function(){
      value = $(window).scrollTop();
      progressBar.attr('value', value);
  });

  $(window).on('resize', function() {
    winHeight = $(window).height(),
    docHeight = $(document).height();

    max = docHeight - winHeight;
    progressBar.attr('max', max);

    value =  $(window).scrollTop();
    progressBar.attr('value', value);
  });
});
</script>