cycle环形进度条实现

我们一般在开发过程中使用条形进度条比较多，环形进度条很少用到，
如何实现以下效果的进度条呢？

在这里，我利用了两个同心圆来实现此效果，一个置于底层一个置于上层来进行进度条的实现，废话少说，直接上代码。

html:

<div class="circle-bar">
  <div class="circle-bar-left integral-left"></div>
   <div class="circle-bar-right integral-right"></div>
   <!-- 遮罩层，显示百分比 -->
   <div class="mask">
       <div class="h2 font-weight-bold percent">
           <span class="integral" style="font-size: 40px;color: #2F9097">10<sub
                   style="padding-left: 4rem">点</sub></span>

       </div>
   </div>
</div>

css:

.circle-bar {
	 font-size: 200px;
	 width: 200px;
	 height: 200px;
	 position: relative;
	 background-color: #2F9097;
	 }
	
	 .circle-bar-left,
	 .circle-bar-right {
	 width: 201px;
	 height: 202px;
	 background-color: #393D4B;
	 }
	
	 /*
	 这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层，
	 clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
	 */
	 .circle-bar-right {
	 clip: rect(0, auto, auto, 100px);
	 }
	
	 .circle-bar-left {
	 clip: rect(0, 100px, auto, 0);
	 }
	
	 .introduction textarea {
	 border: 1px solid #4A4D54;
	 border-radius: .5rem;
	 padding: .5rem;
	 color: #757575;
	 background-color: rgba(32, 34, 39, 0.2);
	 }
	
	 .mask {
	 width: 184px;
	 height: 184px;
	 background-color:#2E313A;
	 text-align: center;
	 line-height: 40px;
	 color: rgba(0, 0, 0, 0.5);
	 }
	
	 .mask :first-child {
	 font-size: 0.3em;
	 height: 0.8em;
	 line-height: 0.8em;
	 display: block;
	 }
	
	 /*所有的后代都水平垂直居中，这样就是同心圆了*/
	 .circle-bar * {
	 position: absolute;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 left: 0;
	 margin: auto;
	 }
	
	 /*自身以及子元素都是圆*/
	 .circle-bar,
	 .circle-bar>* {
	 border-radius: 50%;
 }

js:

<script>
    $('.integral').each(function(){
    var percent = parseInt($(this).text());
    var baseColor = $('.circle-bar').css('background-color');

    if( percent<=50 ){ $('.integral-right').css('transform','rotate('+(percent*3.6)+'deg)'); }else {
        $('.integral-right').css({ 'transform' :'rotate(0deg)', 'background-color' :baseColor });
        $('.integral-left').css('transform','rotate('+((percent-50)*3.6)+'deg)'); } })
</script>

以上就是实现该效果的全部代码