Web Developer Juice - By web developers for web developers

Hello developers. Today I am very much excited to tell you how we can make vertical rating meter using css , html and little php (or may be some other language). The meter reading goes from 0 to 100 units. In this example I am taking units as percentage. The trick is very simple and easy to understand. I am using one meter image in background and hiding its height with overlay blank div.

Here is the DEMO.

Works perfectly on ie6 , firefox and chrome

Simply copy and paste the following code inside your body tag:

1
2
3
4
5
6
7

<div id="performance_meter_one">
    <div class="wrap">
	<div class="overlay" style="height:30%;"></div>
        <!-- Very Important. Here height =  100 - rate_value where rate_value is generated with defined php logic  -->
        <!-- Here height = 30% means actual rate is 70% and hence rate_value = 70 -->
	 </div>
</div>

Here is the CSS. Place it inside your style sheet.

1
2
3

#performance_meter{background:url("meter.gif") no-repeat;width:93px;height:375px}
#performance_meter .wrap{height:268px}
#performance_meter .overlay{position:absolute;width:27px;background:#fff;margin-left:33px;margin-top:27px;}

.

Alll done! Check out the DEMO how it looks.

Cheers!