コニファ・ロゴ

csstest:jQueryプラグインjqmeter.jsを使って、フラットできれいなプログレスバー

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});
});

 

※参照元:http://www.gerardolarios.com/plugins-and-tools/jqmeter/
戻るボタン