Capt. Horatio T.P. Webb

HTML 5 -- Progress Bar and Meter

Parks -- Spring 2014
Last Updated 12PM 2/10/2014

progress
The general format of the progress bar is:
<progress id="some_id" max="100"></progress>

The default behavior of the above tag varies greeatly with the browser in use:
- IE11 makes a page-wide set of five moving blue bullets that repeat accelerated and decelerated movement from left to right on the page
- Chrome make a 100 pixel wide bar with a slate blue box about 30 pixels wide that move back and forth
- Opera makes a gradient shaded bar with a fuzzy green bar moving back and forth
- Safari does nothing
- Firefox makes a green bar with a lighter fuzzy bar moving back and forth
Minimal styling like this:

<form name="f1">
<progress id="pbar2" max="1.0" value="0.0" style="width:200px;height:20px;"></progress> <span id="bvalue"></span>
<input type="button" onClick="go2()" value="Start The Progress Bar">
</form>
produces:

The progress bar "value" attribute can be used to move the progress bar.
Further, when you specify the "max" attribute AND style a "width", the progress bar uses the "value" attribute
to move the progress bar.
It calculates "value"/"max" to determine the proportion of width that contains the bar color.
Below is the javascript timer to advance the progress bar.
```
function go2()
{ 
  clearInterval (ptimer);
  pvalue=0.0;
  document.getElementById("pbar2").value=pvalue;
  document.getElementById("bvalue").innerHTML=pvalue;
  ptimer=setInterval("movep()","750");
}
function movep()
{
  pvalue=pvalue+.01;
  document.getElementById("pbar2").value=pvalue;
  document.getElementById("bvalue").innerHTML=pvalue.toFixed(2);
  if (pvalue > 1.0)
     {
      document.getElementById("bvalue").innerHTML="Done";
      clearInterval (ptimer);
     }
}
```
meter
Meter allows the following attributes:
- value -- current value is displayed by a colored bar
- min -- the lower limit; must be less than max; default is zero.
- max -- the upper limit; must be greater than min; default is 1.0.
- low -- the lower end of the range; greater than min; less than high and max.
- hi -- the higher end of the range; must be greater than min and low; cannot be greater than max. I
- optimum -- determines which range value is preferable -- i.e., has a green background (see below).
This is NOT implemented in any IE browser or Safari 5.1.7. In Chrome, Firefox and Opera: the bar changes to one of three colors:
- red when the "value" is less than "low";
- yellow when the "value" is between "low" and "hi";
- green when the "value" is greater than "hi";
  If a value for "optimum" is specified, the range containing the optimum value is "green". Thus, the colors for the three ranges based on the "value" are:
  1. range: min → low
    if "value" is in this range; this range is red.
    If "optimum" is in this range and if "value" is in this range,
    then this range is "green";
    the low → hi range is yellow
    and the hi → max range is red.
    This behavior is the reverse of the expected behavior:
    low values are good (i.e., "green")
    and
    high values are bad (i.e., "red").
  2. range: low → high
    if "value" is in this range; this range is yellow.
    If "optimum" is in this range, and if "value" is in this range, then this range is "green"; the min → lo range is yellow and the hi → max range is yellow. There is no red range.
  3. range: hi → max
    if "value" is in this range; this range is green.
    If "optimum" is in this range,
    and
    if "value" is in this range, then
    this range is "green";
    the min → lo range is red and the low → high range is yellow.
    This is expected behavior -- that is green is good and occurs at the higher values.
  Using the following meter tag:
  <meter id="mymeter" min="10" max="100" low="40" high="70" optimum="25"></meter>
  
  Meter Value=
  min= max=
  low= high= optimum=
  
  Note: by setting the "optimum" value in the min → low range, this is "reverse" of normal behavior as the low values are now "good" (i.e, green) -- while the high values are "bad (i.e., red).