A Pen by Saminou yengue kizidi.

index.html

<section class="balanceBox Absolute-Center is-Fixed">
  
  <div class="headerBox">
    <h1 class="balanceHeader">
      <span aria-hidden="true" class="entypo-chart-line headerIcon"></span>
      Lease balance
    </h1>
  </div><!--headerBox-->
  
  <hr class="divider">
  
  <div class="meterContainer">
   <div aria-hidden="true" class="meterBackground">
    <div aria-hidden="true" class="meterBar">
     <label class="progressValue">
       <span class="progressNumber"></span>
       <meter max="1000" value="750" class="leaseMeter"></meter>
     </label><!--progressValue-->
    </div><!--meterBar-->
   </div> <!--meterBackground-->
  </div><!--meterContainer-->
  
</section><!--balanceBox-->

Lease-Balance-Meter.markdown

Lease Balance Meter

Design from a Dribbble shot by Cesar Zeppini. I built the visual meter on top of a hidden meter element. The value of the meter’s value attribute determines the width of the red meter bar and the number displayed in the green box. Demo by changing the value of the value attribute from 750 to a number between 0 and 1000.

Because the functionality of the visual meter relies on JavaScript, progressive enhancement is necessary. Progressive enhancement can be achieved by leaving the meter element’s display property at default until hidden by a script-loaded stylesheet. This stylesheet would contain all the style declarations for the visual meter. If the stylesheet failed to load, the meter element would remain accessible.

A Pen by Saminou yengue kizidi on CodePen.

License.

script.js

(function() {
  var leaseMeter, meterBar, meterBarWidth, meterValue, progressNumber;

  /*Get value of value attribute*/
  var valueGetter = function() {
    leaseMeter = document.getElementsByClassName('leaseMeter');
    for (var i=0; i<leaseMeter.length; i++) {
      meterValue = leaseMeter[i].getAttribute('value');
      return meterValue;
    }
  }

  /*Convert value of value attribute to percentage*/
  var getPercent = function() {
    meterBarWidth = parseInt(valueGetter()) * 0.10;
    meterBarWidth.toString;
    meterBarWidth = meterBarWidth + "%";
    return meterBarWidth;
  }

  /*Apply percentage to width of .meterBar*/
  var adjustWidth = function() {
    meterBar = document.getElementsByClassName('meterBar');
    for (var i=0; i<meterBar.length; i++) {
      meterBar[i].style['width'] = getPercent();
    }
  }

  /*Update value indicator*/
  var indicUpdate = function() {
    progressNumber = document.getElementsByClassName('progressNumber');
    for (var i=0; i<progressNumber.length; i++) {
      progressNumber[i].innerHTML = valueGetter();
    }
  }

  adjustWidth();
  indicUpdate();
})();

style.css

/*Design from Dribbble shot by Cesar Zeppini*/
/*http://dribbble.com/shots/1201397-Dashboard-Elements*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #e9f1f4;
}

/*Thanks @shaw
http://codepen.io/shshaw/pen/gEiDt*/

.Absolute-Center {
  margin: auto;
  position: relative;
  top: 0; left: 0; bottom: 0; right: 0;
}

.Absolute-Center.is-Fixed {
  position: fixed;
  z-index: 999;
}

.balanceBox {
  background-color: #fff;
  border-radius: 3px;
  color: #96adbd;
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 192px;
  overflow: hidden;
  position: relative;
  width: 362px;
}

.headerBox {
  background-color: #f9fafc;
  height: 47px;
  top: 0;
  width: 100%;
}

.balanceHeader {
  font: inherit;
  left: 40px;
  line-height: 47px;
  position: absolute;
  text-transform: uppercase;
}

.headerIcon {
  font-size: 16px;
  left: -25px;
  position: absolute;
  display: inline-block;
}

.divider {
  background-color: #ebf0f4;
  border: none;
  height: 1px;
  position: absolute;
  top: 47px;
  width: 100%
}

.meterContainer {
  overflow: display;
  height: 78px;
  width: 300px;
  position: absolute;
  top: 79px;
  left: 31px;
}

.meterBackground {
  background-color: #e9f1f4;
  border-radius: 32px;
  height: 32px;
  width: 300px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.meterBar {
  background-color: #ea5c50;
  border-radius: 32px;
  display: block;
  height: 100%;
  width: 75%;
  position: relative;
}

meter {
  display: none;
}

.progressValue {
  background-color: #38b3b1;
  border-radius: 2px;
  color: #fff;
  font-family: 'Montsserat', sans-serif;
  height: 31px;
  right: -25px;
  line-height: 31px;
  position: absolute;
  text-align: center;
  top: -46px;
  width: 50px;
  z-index: 2;
}

/*Triangluar tip on numerical indicator*/
.progressValue:before {
  background-color: #38b3b1;
  border-radius: 1px;
  content: "";
  height: 10px;
  left: 20px;
  position: absolute;
  transform: rotate(45deg);
  top: 25px;
  width: 10px;
  z-index: 3;
}