<div class="wrapper">
    <header class="header"><h1 class="titlehead">Accessible CSS Meter Element</h1></header>
    <div class="elbox">
        <label class="ellabel" for="elunstyled">Default - unstyled with value 65%</label>
        <meter id="elunstyled" name="unstyled" min="0" low="20" optimum="55" high="70" max="100" value="65" title="mph"></meter>
    </div>
    <div class="elbox">
        <label class="ellabel" for="el0">Systolic: 145 (high)</label>
        <meter class="bpmeter" id="el0" name="systolic" min="0" low="90" optimum="120" high="140" max="200" value="145" title="mmHg"></meter>
    </div>
    <div class="elbox">
        <label class="ellabel" for="el1">Diastolic: 80 (normal)</label>
        <meter class="bpmeter" id="el1" name="diastolic" min="0" max="200" low="60" high="90" optimum="80" value="80" title="mmHg"></meter>
    </div>
    <div class="elbox">
        <label class="ellabel" for="el1">Drive Storage</label>
        <meter class="bpmeter drivestorage" id="el2" name="drivestorage" min="0" max="1000" low="60" high="950" optimum="900" value="800" title="GB"></meter>
        <br>
        <table class="legend">
            <tr>
                <td class="keycell" id="key0">Documents<br>(40 GB)</td>
                <td class="keycell" id="key1">Apps<br>(80 GB)</td>
                <td class="keycell" id="key2">Audio<br>(320 GB)</td>
                <td class="keycell" id="key3">Video<br>(320 GB)</td>
                <td class="keycell" id="key4">Images<br>(40 GB)</td>
                <td class="keycell" id="key5">Available<br>(200 GB)</td>
            </tr>
        </table>
    </div>
    <p class="comment">The infrequently-used meter element works well to show scalar values in a defined range. A little CSS lets us retain all the WCAG goodness of the semantic element along with limited freedom to customize the style.</p>

    <footer class="footer"><a href="https://shearspiremedia.com" target="_blank">Created by ShearSpire Media</a></footer>
</div>

/* Base styles imported from
https://makepages.com/css/shared.css
*/
.elbox {
  margin:0 auto;
  width:96%;
  max-width:600px;
}
.ellabel {
  display:block;
  padding:0;
  margin:2rem 0 1rem 0;
}
.bpmeter {
  width:100%;
  height:30px;
  text-align:center;
}
.bpmeter, .bpmeter::-webkit-meter-bar {
  background:none;
  background-color:#f5f5f5;
  border-radius:2px;
  box-shadow: 0 5px 5px -5px #333 inset;
}
.bpmeter::-moz-meter-bar {
  background:none;
  background-color:#f5f5f5;
  border-radius:2px;
  box-shadow: 0 5px 5px -5px #333 inset;
}
.bpmeter::-webkit-meter-optimum-value {
  background:linear-gradient(to top, #030, #0f0);
  border-radius:2px;
  box-shadow: 0 5px 5px -5px #333 inset;
}
.bpmeter::-moz-meter-bar {
  background:linear-gradient(to top, #030, #0f0);
  border-radius:2px;
  box-shadow: 0 5px 5px -5px #333 inset;
}
.bpmeter::-webkit-meter-suboptimum-value {
  background:linear-gradient(to top, #990, #ffc);
  border-radius:2px;
  box-shadow: 0 5px 5px -5px #333 inset;
}
.bpmeter:-moz-meter-sub-optimum::-moz-meter-bar {
  background:linear-gradient(to top, #990, #ffc);
  border-radius:2px;
  box-shadow: 0 5px 5px -5px #333 inset;
}
.bpmeter::-webkit-meter-even-less-good-value {
  background:linear-gradient(to top, #600, #c00);
  border-radius:2px;
  box-shadow: 0 5px 5px -5px #333 inset;
}
.drivestorage::-webkit-meter-optimum-value {
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient(
    90deg,
    #8bcf69 5%,
    #e6d450 5%,
    #e6d450 15%,
    #f28f68 15%,
    #f28f68 55%,
    #cf82bf 55%,
    #cf82bf 95%,
    #719fd1 95%,
    #719fd1 100%
  );
  background-size: 100% 100%;
}
.drivestorage::-moz-meter-bar {
  -moz-appearance: none;
  box-shadow: 0 5px 5px -5px #999 inset;
  background-image: linear-gradient(
    90deg,
    #8bcf69 5%,
    #e6d450 5%,
    #e6d450 15%,
    #f28f68 15%,
    #f28f68 55%,
    #cf82bf 55%,
    #cf82bf 95%,
    #719fd1 95%,
    #719fd1 100%
  );
  background-size: 100% 100%;
}
.legend {
  width:100%;
  margin:20px 0 0 0;
}
.keycell {
  width:16.6%;
  height:60px;
  border:0 none;
  font-size:0.9rem;
  text-align:center;
  vertical-align:middle;
  border-top:12px solid #e4e4e4;
}
#key0 {border-color: #8bcf69;}
#key1 {border-color: #e6d450;}
#key2 {border-color: #f28f68;}
#key3 {border-color: #cf82bf;}
#key4 {border-color: #719fd1;}

//no js needed