Progress bar indicator (jQuery).

About.md

Progress Bar Indicator (slim)

A modified version of this codepen: http://codepen.io/pankajparashar/pen/towxF

Now accounts for:

• adding z-index property to the <progress> element
• subtracts additional <footer> element's height from progress calculation (in the getMax() method)

Demo

https://jsfiddle.net/edm00se/dkn5bqp8/

scripts.js

/*
 * Modified version of:
 * http://codepen.io/pankajparashar/pen/towxF
 * 
 * Subtracts additional <footer> element's height, adds z-index to <progress> element (to prevent hiding behind images).
 */
$(document).ready(function(){
    
    var getMax = function(){
        return $(document).height() - $(window).height() - $('footer').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();
        });
    }
  
  $('#flat').addClass("active");
  $('#progressBar').addClass('flat');
    
  $('#flat').on('click', function(){
    $('#progressBar').removeClass().addClass('flat');
    $('a').removeClass();
    $(this).addClass('active');
    $(this).preventDefault();
  });

  $('#single').on('click', function(){
    $('#progressBar').removeClass().addClass('single');
    $('a').removeClass();    
    $(this).addClass('active');
    $(this).preventDefault();    
  });

  $('#multiple').on('click', function(){
    $('#progressBar').removeClass().addClass('multiple');
    $('a').removeClass();    
    $(this).addClass('active');
    $(this).preventDefault();    
  });

  $('#semantic').on('click', function(){
    $('#progressBar').removeClass().addClass('semantic');
    $('a').removeClass();    
    $(this).addClass('active');
    $(this).preventDefault();
    alert('hello');
  });

  $(document).on('scroll', function(){

      maxAttr = $('#progressBar').attr('max');
      valueAttr = $('#progressBar').attr('value');
      percentage = (valueAttr/maxAttr) * 100;
      
      if(percentage<49){
        document.styleSheets[0].addRule('.semantic', 'color: red');
        document.styleSheets[0].addRule('.semantic::-webkit-progress-value', 'background-color: red');
        document.styleSheets[0].addRule('.semantic::-moz-progress-bar', 'background-color: red');
      }
      else if(percentage<98){
        document.styleSheets[0].addRule('.semantic', 'color: orange');
        document.styleSheets[0].addRule('.semantic::-webkit-progress-value', 'background-color: orange');
        document.styleSheets[0].addRule('.semantic::-moz-progress-bar', 'background-color: orange');
      }
      else {
        document.styleSheets[0].addRule('.semantic', 'color: green');
        document.styleSheets[0].addRule('.semantic::-webkit-progress-value', 'background-color: green');
        document.styleSheets[0].addRule('.semantic::-moz-progress-bar', 'background-color: green');
      }      
  });
  
});

snippet.html

<!-- body of content, with article in <article> tag -->

<progress value="0" id="progressBar">
  <div class="progress-container">
    <span class="progress-bar"></span>
  </div>
</progress>

<article>  
  <blockquote>Scroll through the page and keep an eye on the top of the webpage.</blockquote>
  
   <p>Passepartout, when he saw his master arrested, would have fallen upon Fix had he not been held back by some policemen.  Aouda was thunderstruck at the suddenness of an event which she could not understand.  Passepartout explained to her how it was that the honest and courageous Fogg was arrested as a robber.  The young woman's heart revolted against so heinous a charge, and when she saw that she could attempt to do nothing to save her protector, she wept bitterly.</p>

<p>As for Fix, he had arrested Mr. Fogg because it was his duty, whether Mr. Fogg were guilty or not.</p>

<p>The thought then struck Passepartout, that he was the cause of this new misfortune!  Had he not concealed Fix's errand from his master?  When Fix revealed his true character and purpose, why had he not told Mr. Fogg?  If the latter had been warned, he would no doubt have given Fix proof of his innocence, and satisfied him of his mistake; at least, Fix would not have continued his journey at the expense and on the heels of his master, only to arrest him the moment he set foot on English soil. Passepartout wept till he was blind, and felt like blowing his brains out.</p>

<p>Aouda and he had remained, despite the cold, under the portico of the Custom House.  Neither wished to leave the place; both were anxious to see Mr. Fogg again.</p>

<p>That gentleman was really ruined, and that at the moment when he was about to attain his end.  This arrest was fatal.  Having arrived at Liverpool at twenty minutes before twelve on the 21st of December, he had till a quarter before nine that evening to reach the Reform Club, that is, nine hours and a quarter; the journey from Liverpool to London was six hours.</p>

<p>If anyone, at this moment, had entered the Custom House, he would have found Mr. Fogg seated, motionless, calm, and without apparent anger, upon a wooden bench.  He was not, it is true, resigned; but this last blow failed to force him into an outward betrayal of any emotion.  Was he being devoured by one of those secret rages, all the more terrible because contained, and which only burst forth, with an irresistible force, at the last moment?  No one could tell.  There he sat, calmly waiting&mdash;for what?  Did he still cherish hope?  Did he still believe, now that the door of this prison was closed upon him, that he would succeed?</p>

<p>However that may have been, Mr. Fogg carefully put his watch upon the table, and observed its advancing hands.  Not a word escaped his lips, but his look was singularly set and stern.  The situation, in any event, was a terrible one, and might be thus stated: if Phileas Fogg was honest he was ruined; if he was a knave, he was caught.</p>

<p>Did escape occur to him?  Did he examine to see if there were any practicable outlet from his prison?  Did he think of escaping from it? Possibly; for once he walked slowly around the room.  But the door was locked, and the window heavily barred with iron rods.  He sat down again, and drew his journal from his pocket.  On the line where these words were written, "21st December, Saturday, Liverpool," he added, "80th day, 11.40 a.m.," and waited.</p>

<p>The Custom House clock struck one.  Mr. Fogg observed that his watch was two hours too fast.</p>

<p>Two hours!  Admitting that he was at this moment taking an express train, he could reach London and the Reform Club by a quarter before nine, p.m.  His forehead slightly wrinkled.</p>
</article>
<footer>
  some footer stuff
</footer>

<!-- in script footer, after jQuery is added -->
<script src="js/scripts.js" async></script>

styles.css

progress {
  /* Positioning */
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;

  /* 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: transparent;
}

.flat::-webkit-progress-value {
  background-color: red;
}

.flat::-moz-progress-bar {
  background-color: red;
}

.single::-webkit-progress-value {
  background-color: transparent;
  background-image: -webkit-linear-gradient(left, transparent, red);
}

.single::-moz-progress-bar {
  background-color: transparent;
  background-image: -moz-linear-gradient(left, transparent, red);
}

.multiple::-webkit-progress-value {
  background-image: -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	                  -webkit-linear-gradient(left, green, red);
}

.multiple::-moz-progress-bar {
  background-image: -moz-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	                  -moz-linear-gradient(left, green, 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;
}

footer {
  border-top: 1px solid red;
}