Circle Loader

HTML

<div id="myProgress" class="circle-loader" value="50">
    <div class="circle-loader-inner">
        <div class="circle-loader-half">
            <div class="circle-loader-rotate">
                <div class="circle-loader-circle"></div>
            </div>
        </div>
        <div class="circle-loader-half">
            <div class="circle-loader-rotate">
                <div class="circle-loader-circle"></div>
            </div>
        </div>
    </div>
</div>
<input type="range" min="0" max="100" onchange="updateProgress('myProgress', this.value)" />

CSS

body {
    background: #333;
}

.circle-loader {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 100px;
    background: -webkit-linear-gradient(top, rgba(0,0,0,.4), rgba(0,0,0,.1));
    border-radius: 100%;
    box-shadow: inset 0 0 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.1);
}

.circle-loader::after {
    content: attr(value) '%';
    display: block;
    width: 76%;
    height: 38%;
    background: -webkit-linear-gradient(top, #626262, #2B2B2B);
    border-radius: 100%;
    position: absolute;
    top: 12%;
    left: 12%;
    text-align: center;
    font: 12px arial;
    line-height: 0;
    padding-top: 38%;
    color: white;
    text-shadow: 0 1px 0 black;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}

.circle-loader-inner {
    width: 92%;
    height: 92%;
    position: absolute;
    top: 4%;
    left: 4%;
    box-shadow: 0 1px 0 rgba(0,0,0,.1);
    border-radius: 100%;
}

.circle-loader-half {
    width: 50%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    overflow: hidden;
    background: rgba(255,255,255,.08);
    border-radius: 0 100% 100% 0/0 50% 50% 0;
}

.circle-loader-half:last-child {
    -webkit-transform-origin: 0 50%;
    -webkit-transform: rotate(-180deg);
}

.circle-loader-rotate {
    width: 100%;
    height: 100%;
    -webkit-transform-origin: 0 50%;
    -webkit-transform: rotate(-180deg);
    overflow: hidden;
    position: absolute;
}

.circle-loader-half:first-child .circle-loader-rotate {
    -webkit-transform: rotate(-0deg);
}

.circle-loader-half:last-child .circle-loader-rotate {
    -webkit-transform: rotate(-180deg);
}

.circle-loader-circle {
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    border-radius: 100%;
    background: -webkit-linear-gradient(top, #a1c031, #77aa20);
    box-shadow: inset 0 1px 0px rgba(255,255,255,.5);
}

.circle-loader-half:first-child .circle-loader-circle {
   ...

JavaScript

function updateProgress(circle, value) {
    var angle = (value / 100) * 360;
    var angle1 = ((angle > 180) ? 180 : angle % 180) - 180;
    var angle2 = ((angle > 180) ? angle % 180 : 0) - 180;
    if (angle == 360) {
        angle2 = 0;
    }
    if (angle == 180) {
        angle1 = 0;
    }
    var angle1_inner = -angle1;
    var angle2_inner = -180 - angle2;
    document.querySelector('#' + circle).setAttribute('value', value);
    var circle_rotate = document.querySelectorAll('#' + circle + ' .circle-loader-rotate');
    var circle_inner = document.querySelectorAll('#' + circle + ' .circle-loader-circle');
    circle_rotate[0].style.webkitTransform = 'rotate(' + Math.floor(angle1).toString() + 'deg)';
    circle_rotate[1].style.webkitTransform = 'rotate(' + Math.floor(angle2).toString() + 'deg)';
    circle_inner[0].style.webkitTransform = 'rotate(' + Math.floor(angle1_inner).toString() + 'deg)';
    circle_inner[1].style.webkitTransform = 'rotate(' + Math.floor(angle2_inner).toString() + 'deg)';
    console.log(angle,
                Math.floor(angle1).toString(),
                Math.floor(angle2).toString(),
                Math.floor(angle1_inner).toString(),
                Math.floor(angle2_inner).toString());
}