Animated horizontal or vertical progress meter using jQMeter

For animated progress meter, we should use these codes at the end of the body in document ready function.


$(document).ready(function(){
$('#jqmeter-horizontal-container').jQMeter({
goal:'$1,000',
raised:'$600',
orientation:'horizontal',
width:'200px',
height:'50px'
});
$('.jqmeter_horizontal_without_value').jQMeter({
goal:'$1,000',
raised:'$300',
orientation:'horizontal',
width:'200px',
height:'50px',
displayTotal:false
});
$('#jqmeter-vertical-container').jQMeter({
goal:'$1,000',
raised:'$800',
orientation:'vertical',
width:'50px',
height:'200px'
});
$('.jqmeter-vertical-container-without-value').jQMeter({
goal:'$1,000',
raised:'$400',
orientation:'vertical',
width:'50px',
height:'100px',
displayTotal:false
});
});

In the body part, we should write the divisions

Horizontal progress meter using jQMeter
Vertical progress meter using jQMeter

You can see the live demo