rss feed Twitter Page Facebook Page Github Page Stack Over Flow Page

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 {
  height: 25px;
} div {
  display: block;
  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.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.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.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;


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