ゲージ？ステータスバー？のようなものを実装したくて、Google検索でいろいろ探してみたのですが、なかなか見つからなかったので、自作しました。

●デモ

※jQueryの Easing Plugin を使ってます。
ダウンロードはこちらからどうぞ。
http://gsgd.co.uk/sandbox/jquery/easing/

●HTML

<ul>
	<li><img class="block1" src="http://a-carnation.net/wp-content/themes/fastfood/images/gauge1.png" alt="" width="0" height="33" /></li>
	<li><img class="block2" src="http://a-carnation.net/wp-content/themes/fastfood/images/gauge2.png" alt="" width="0" height="33" /></li>
	<li><img class="block3" src="http://a-carnation.net/wp-content/themes/fastfood/images/gauge3.png" alt="" width="0" height="33" /></li>
	<li><img class="block4" src="http://a-carnation.net/wp-content/themes/fastfood/images/gauge4.png" alt="" width="0" height="33" /></li>
	<li><img class="block5" src="http://a-carnation.net/wp-content/themes/fastfood/images/gauge5.png" alt="" width="0" height="33" /></li>
	<li><img class="block6" src="http://a-carnation.net/wp-content/themes/fastfood/images/gauge6.png" alt="" width="0" height="33" /></li>
	<li><img class="block7" src="http://a-carnation.net/wp-content/themes/fastfood/images/gauge7.png" alt="" width="0" height="33" /></li>
	<li><img class="block8" src="http://a-carnation.net/wp-content/themes/fastfood/images/gauge8.png" alt="" width="0" height="33" /></li>
	<li><img class="block9" src="http://a-carnation.net/wp-content/themes/fastfood/images/gauge9.png" alt="" width="0" height="33" /></li>
</ul>

●CSS

li{
	background: url('http://a-carnation.net/wp-content/themes/fastfood/images/gauge_bg.png') no-repeat 0 0;
	width: 308px;
	height: 33px;
	padding-left: 14px;
}

●Script

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("li img").animate({height: "33px"}, "fast");
    $(".block9").animate({width: "260px"}, "slow");
    $(".block8").animate({width: "230px"}, "slow");
    $(".block7").animate({width: "200px"}, "slow");
    $(".block6").animate({width: "170px"}, "slow");
    $(".block5").animate({width: "140px"}, "slow");
    $(".block4").animate({width: "110px"}, "slow");
    $(".block3").animate({width: "80px"}, "slow");
    $(".block2").animate({width: "50px"}, "slow");
    $(".block1").animate({width: "20px"}, "slow");
});
</script>

どうしても見せ方にこだわりたかったので、ややこしいソースになっていますが、要は下の応用です。

●デモ

●HTML

<div class="block"></div>

●CSS

div{
	background: #00FF00;
	width: 0px;
	height: 30px;
}

●Script

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".block").animate({width: "300px"}, "slow");
});
</script>