jquery circle progress bar
//HTML
<div class="circle" id="circle-a">
<strong></strong>
</div>
//CSS
body {
font-size: 0;
text-align: center;
}
.circle {
width: 200px;
margin: 6px 20px 20px;
display: inline-block;
position: relative;
text-align: center;
vertical-align: top;
strong {
position: absolute;
top: 70px;
left: 0;
width: 100%;
text-align: center;
line-height: 45px;
font-size: 43px;
}
}
//JQUERY
var progressBarOptions = {
startAngle: -1.55,
size: 200,
value: 0.75,
fill: {
color: '#ffa500'
}
}
$('.circle').circleProgress(progressBarOptions).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
});
$('#circle-a').circleProgress({
value : 0.92,
fill: {
color: '#008000'
}
});