Here is a suggested solution:
HTML
<span class='Progress'>
<div class="Bar">
<div class="Outer">
<div class="Fill"></div>
</div>
<div class="Draw"></div>
<div class="Status"><span></span></div>
</div>
</span>
CSS
.Progress {
position: absolute;
left: 25%;
bottom: 30%;
}
.Progress .Bar {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #E5E5E5;
position: relative;
}
.Progress .Bar .Outer {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 70px;
height: 70px;
clip: rect(0, 70px, 70px, 35px);
}
.Bar .Outer .Fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 35px);
top: calc(50% - 35px);
width: 70px;
height: 70px;
clip: rect(0, 35px, 70px, 0);
background: #00A0E3;
transform: rotate(60deg);
}
.Progress .Bar .Draw {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 53.84615px/2);
top: calc(50% - 53.84615px/2);
width: 53.84615px;
height: 53.84615px;
background: #fff;
text-align: center;
display: table;
}
.Progress .Bar .Status {
display: table-cell;
vertical-align: middle;
position: absolute;
margin-left: -100px;
margin-top: -10px;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
text-align: center;
}
.Progress .Bar .Status > span {
font-size: 14px;
font-weight: bold;
color: #00A0E3;
}
.Progress .Bar.halfway {
background-color: #00A0E3;
}
.Progress .Bar.halfway .Outer {
clip: rect(0, 35px, 70px, 0);
}
.Progress .Bar.halfway .Outer .Fill {
clip: rect(0, 70px, 70px, 35px);
background: #E5E5E5;
}
.Progress .Bar.complete.halfway,
.Progress .Bar.complete .Fill {
background-color: #8cd64c !important;
}
Javascript/JQuery:
$('document').ready(function() {
var progress = function(perc) {
perc = Math.round(perc * 100) / 100; // 2 decimal places
var $bar = $('.Progress .Bar'),
$fill = $('.Progress .Bar .Outer .Fill'),
$status = $('.Progress .Bar .Status span');
$bar.removeClass("halfway").removeClass("complete");
// outer bar
if (perc >= 50) $bar.addClass("halfway");
if (perc >= 100) $bar.addClass("complete");
// progress bar
var degrees = 360 * perc / 100;
$fill.css({
"WebkitTransform": 'rotate(' + degrees + 'deg)',
"-moz-transform": 'rotate(' + degrees + 'deg)'
});
// status
$status.html(perc);
}
// Test it!
progress(10);
setTimeout(function() {
progress(50);
setTimeout(function() {
progress(100);
}, 2000);
}, 2000);
});
View the CodePen example