Progressbar with pure JS

by Symphony

HTML

<div id="wr">
    <div id="circle">
        <div id="circle-info">
            <h3><span id="perc">40</span>%</h3>
        </div>
        <div id="circle-arrow"></div>
    </div>
</div>

CSS

div, span, p, strong, h3 {
    padding: 0; margin: 0
}
#wr {
    padding: 60px
}
#circle {
    width: 232px;
    height: 232px;
    position: relative;
    border: 3px solid #bda538;
    border-radius: 50%;
    overflow: hidden;
}
#circle-info {
    position: absolute;
    color: #843f55;
    width: 160px;
    border-radius: 50%;
    height: 160px;
    margin: auto;
    background: #fff;
    left:0;top:0;bottom:0;right:0;
    border: 4px solid #bda538;
    text-align: center;
    cursor: pointer;
    z-index: 20;
}
#circle-info h3 {
    font: 50px Arial, sans-serif;
    display: block;
    font-weight: bold;
    margin-top: 50px;
}
#circle-arrow {
    left:0;top:0;
    position: absolute;
    background: #f15564 url(http://fb.ru/misc/i/gallery/7400/265205.png) no-repeat 50% 50%;
    background-size: cover;
    width: 232px;
    height: 232px;
    z-index: 15;
}

JavaScript

document.getElementById('circle-info').onclick = function(){
    var timer = 0;
    var percent = document.getElementById('perc').innerHTML;
    
    window.setInterval(function(){
    timer++;
        
    if(timer <= percent){
        degree = 3.6*timer; 
        document.getElementById('circle-arrow').style.MozTransform = 'rotate('+degree+'deg)';
        document.getElementById('circle-arrow').style.WebkitTransform = 'rotate('+degree+'deg)';
        document.getElementById('circle-arrow').style.OTransform = 'rotate('+degree+'deg)';
        document.getElementById('circle-arrow').style.MsTransform = 'rotate('+degree+'deg)';
        document.getElementById('circle-arrow').style.transform = 'rotate('+degree+'deg)';
        document.getElementById('perc').innerHTML = timer;
    }
    },50);
};