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

How to make a content center in the page

To make center display of any content, you should have these properties for the content:

1. display: block;

2. width:500px;

3. margin: 0 auto;

<body>

<div class="content">

</div>

</body>

The css should be:

.content{

margin:0 auto;

display:block;

width: 50%;}

The output would be like that

This is content