jQueryプラグインjqmeter.jsを使って、フラットできれいなプログレスメーター(プログレスバー)の実装です。
デフォルトは横型ですが、html内に記述するスクリプトのパラメーターに「orientation:'vertical'」を追加することで簡単に縦型に変更できます。
同じく、goalの値を100として、raisedで記載した値を%に直したものが進捗としてバーの長さに反映します。その他、プログレスメーターの幅、プログレスメーターの高さ、背景色、バーの色、アニメーションするバーのスピードの値や%の値表示のオンオフなどを変更して、カスタマイズできます。
scriptの一例
$(document).ready(function(e) {
$('#jqmeter-horizontal2').jQMeter({goal:'$10,000',raised:'$3,000',
width:'270px',height:'20px',bgColor:'#dadada',barColor:'#f09246',
animationSpeed:1000,displayTotal:false});
});