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>

以上就是實現該效果的全部代碼