使用CSS3和HTML5实现简单的计时器进度条

本文改编自http://www.jianshu.com/p/2e7c4a73f39d，本文将jq改为原生，仅此而已
使用jquery+CSS和HTML5实现简单的计时器进度条

样式部分：

*{  
    margin: 0;  
    padding: 0;  
}  
.wrap,.circle,.percent{  
    position: absolute;  
    width: 146px;  
    height: 146px;  
    border-radius: 50%;  
}  
.wrap{  
    margin-top: 50px;
    margin-left: 50px;
}  
.circle{  
    box-sizing: border-box;  
    border:10px solid transparent;  
    clip:rect(0,146px,146px,73px);  /*裁剪区域*/
}  
.clip-auto{  
    clip:rect(auto, auto, auto, auto);  
}  
.percent{  
    box-sizing: border-box;  
    top:-10px;  
    left:-10px;  
}  
.left{  
    transition:transform ease;  
    border:10px solid skyblue;  
    clip: rect(0,73px,146px,0);  
}  
.right{  
    border:10px solid skyblue;  
    clip: rect(0,146px,146px,73px);  
}  
.wth0{  
    width:0;  
}  
.num{  
    position: absolute;  
    box-sizing: border-box;  
    text-align: center;  
    font-size: 16px;  
    left: calc(50% - 16px);
    top: calc(50% - 16px);
    border-radius: 50%;  
    background-color: #fff;  
    z-index: 1;  
}  
.circlr_trans{
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    left: calc(50% - 8px);
    top: -3px;
    background-color: pink;
    transform-origin: 50% 76px; 
}

html部分：

<div class="wrap">  
    <div class="circle">
        <div class="percent left"></div>  
        <div class="percent right wth0"></div>        
    </div>  
    <div class="circlr_trans"></div>
    <div class="num"><span>0</span>s</div> 
</div>

js部分：

var percent=0;  
var loading=setInterval(function(){  
    if(percent>=360){ 
        clearInterval(loading);
        return false;
        percent=0;  
        document.querySelector('.circle').classList.remove('clip-auto');
        document.querySelector('.right').classList.add('wth0');
    }else if(percent>=180){  
        document.querySelector('.circle').classList.add('clip-auto');
        document.querySelector('.right').classList.remove('wth0');
    }  //1秒转6度         60秒 转360度
    percent+=6; 
    document.querySelector('.left').style.transform='rotate('+percent+'deg)';
    document.querySelector('.circlr_trans').style.transform="rotate("+percent+"deg)";
    document.querySelector('.num span').innerHTML=percent.toFixed(0)/6;
},1000);

效果图.png