html+css+js 百分比圆圈

.yuan{ 
            width: 76px;
            height: 76px;
            margin: 4.7px auto 0;
            box-sizing: border-box;
            padding-top: 8px;
            text-align: center;
            background-color: #CFDDFC;
            border-radius: 50%;
            position: relative;
        }
        .yuan_bl1 , .yuan_bl2 , .yuan_bl3 , .yuan_bl4{ 
            width:100%; 
            height:100%; 
            border-radius:50%; 
            position:absolute; 
            left:0; 
            top:0;
            transform: rotate(90deg);
        }
        .yuan_bl1,.yuan_bl2{ 
            background-color:#739CFF;
        }
        .yuan_bl3 , .yuan_bl4{ 
            background-color:#CFDDFC;
        }
        .yuan_bl1 , .yuan_bl3{ 
            clip: rect(0 76px 38px 0);
        }
        .yuan_bl2 , .yuan_bl4{ 
            clip:rect(38px 76px 76px 0);
        }
        .yuan_text{
            width: 60px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 50%;
            position: relative;
            font-family: PingFangSC-Regular;
            font-size: 20px;
            color: #0B1434;
            letter-spacing: 0;
            text-align: center;
            height: 60px;
            line-height: 60px;
        }
        
        <div class="yuan">
            <div class="yuan_bl1">
               </div>
            <div class="yuan_text">50</div>
      	</div>
      	
		$(function(){
            //初始化
            var bl = parseInt($('.yuan_text').html());
            var rotatenum = bl;
            if(bl > 50){
                var blhtml = '';
                rotatenum = (bl - 50) * 3.6;
                blhtml += '<div class="yuan_bl2">';
                blhtml += '<div class="yuan_bl4" style="-webkit-transform:rotate(' + rotatenum + 'deg);transform:rotate(' + rotatenum + 'deg);"></div>';
                blhtml += '</div>';
                //$('.yuan_bl1').remove($('.yuan_bl3'));
                $('.yuan_bl1').after(blhtml);
            }else{
                var blhtml = '';
                rotatenum = bl * 3.6;
                blhtml += '<div class="yuan_bl3" style="-webkit-transform:rotate(' + rotatenum + 'deg);transform:rotate(' + rotatenum + 'deg);"></div>';
                $('.yuan_bl1').append(blhtml);
            }
        })