CSS Meter Bar

Meter bar are often used to display any we need to the end user. Unfortunately, most of these meter bar are using images and, to be honest, this can easily be accomplished only using CSS.

The concept is very simple. A main div will be used to wrap all the elements and each of these elements will be used to display the progression.

Let's create the wrapper including the common properties for each progressions

div.bar {
  height: 25px;
}
div.bar div {
  display: block;
  float:left;
  height: 25px;
  margin: 0;
  padding: 0;
  position: relative;
}

For this example I created three (3) progressions. Orange first, Yellow then Blue. Because I added a box-shadow, I had to tweek a little the CSS to make sure the three elements shows up correctly.

div.bar div.first {
  background: #D6923C;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 8px;
  -webkit-border-radius: 8px 0px 0px 8px;
  border-radius: 8px 0px 0px 8px;
  -webkit-box-shadow: -5px 0px 8px 2px #D6923C;
  -moz-box-shadow: -5px 0px 8px 2px #D6923C;
  box-shadow: -5px 0px 8px 2px #D6923C;
  width: 140px;
  z-index: 10;
}
div.bar div.middle {
  background: #B7C33D;
  -webkit-box-shadow: 0px 0px 8px 2px #B7C33D;
  -moz-box-shadow: 0px 0px 8px 2px #B7C33D;
  box-shadow: 0px 0px 8px 2px #B7C33D;
  width: 120px;
  z-index: 5;
}
div.bar div.last{
  background: #009FD5;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-radius: 0px 8px 8px 0px;
  border-radius: 0px 8px 8px 0px;
  -webkit-box-shadow: 5px 0px 8px 2px #009FD5;
  -moz-box-shadow: 5px 0px 8px 2px #009FD5;
  box-shadow: 5px 0px 8px 2px #009FD5;
  width: 30px;
  z-index: 10;
}

The HTML

<div class="bar">
    <div class="first"></div>
    <div class="middle"></div>
    <div class="last"></div>
</div>

Demo: