Half Circular Progress

Single Element 1/2 circle progress indicator. Mainly for static display but can be animated with basic functionality.

by TastyBytes

HTML

<div class="circleProgress half percent0" id="testCircle" data-anim="base wrapper">0<small>%</small></div>

CSS

.circleProgress {
    position: absolute;
    width: 100px;
    
    text-align: center;
    font: normal normal bold 30px helvetica, arial, sans-serif;
    padding-top: 20px;
    color: #58BDED;
}
.circleProgress small {
    font-size: 12px;
    text-transform: 
}
.circleProgress.half {
    height: 50px;
    clip: rect(0px,100px,50px,0px);
}

.circleProgress.half:before {
    display: block;
    height: 80px;
    width: 80px;
    border: 10px solid #eee;
    
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    border-radius: 50px;

}

.circleProgress.half:after {
    display: block;
    height: 80px;
    width: 80px;
    border: 10px solid #58BDED;
    
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    border-radius: 50px;
    clip: rect(50px,100px,100px,0px);
    transition: 999ms linear;
}

.circleProgress.half.percent5:after {
    -webkit-transform: rotate(9deg);
    transform: rotate(9deg);
}
.circleProgress.half.percent10:after {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
}
.circleProgress.half.percent15:after {
    -webkit-transform: rotate(27deg);
    transform: rotate(27deg);
}
.circleProgress.half.percent20:after {
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg);
}
.circleProgress.half.percent25:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.circleProgress.half.percent30:after {
    -webkit-transform: rotate(54deg);
    transform: rotate(54deg);
}
.circleProgress.half.percent35:after {
    -webkit-transform: rotate(63deg);
    transform: rotate(63deg);
}
.circleProgress.half.percent40:after {
    -webkit-transform: rotate(72deg);
    transform: rotate(72deg);
}
.circleProgress.half.percent45:after {
    -webkit-transform: rotate(81deg);
    transform: rotate(81deg);
}
.circleProgress.half.percent50:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.circleProgress.half.percent55:after {
    -webkit-transform:...

JavaScript

var percent = 0;
var percentClass = 0;
var increment = 1;
var el = document.getElementById('testCircle')

setInterval( function() {
    if ( percent + increment <= 100 ) {
        el.className = el.className.replace(' percent'+percentClass, '');
        percent += increment;
        percentClass = 5 * Math.ceil(percent/5);
//        console.log( percent, percentClass );
        el.className = el.className + ' percent'+percentClass;
        el.innerHTML = percent+"<small>%</small>";
    }
}, 200);