css to achieve circle progress

Reference article link: https://my.oschina.net/conqueror/blog/727713 , I made some changes to my needs.

Effect picture:

 html：

<div class="circle col-md-2" style="background: #91DBF2;">
    <div class="pie_left"><div class="left" style="background: #23B7E5;"></div></div>
    <div class="pie_right"><div class="right" style="background: #23B7E5;"></div></div>
    <div class="mask">
        <div class="msgBlock"><div>今日新增用户</div><div class="cicleNum">30</div></div>
    </div>
</div>

css：

<style>
        /*圆圈进度*/
        .circle{
            width:160px;
            display:inline-block;
            height:160px;
            margin:20px;
            position: relative;
            border-radius: 50%;
        }
        .pie_left, .pie_right{
            width:160px;
            height:160px;
            position: absolute;
            top:0px;
            left:0px;
        }
        .left, .right{
            position: absolute;
            left:0px;
            top:0px;
            border-radius:50%;
            width:100%;
            height:100%;
        }
        .pie_left, .left{
            clip: rect(auto, 80px, auto, auto);
        }
        .pie_right, .right{
            clip:rect(0, auto, auto, 80px);
        }
        .mask{
            position: absolute;
            top:20px;
            left:20px;
            width:120px;
            height:120px;
            font-size:18px;
            font-weight: 600;
            border-radius: 50%;
            background: #fff;
            text-align: center;
        }
        .msgBlock{
            font-size: 14px;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            justify-content: space-between;
            width: 100%;
            height: 50px;
            position: absolute;
            top: 40px;
        }
    </style>

 js:

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    $(function () {
        $(".circle").each(function(){
            //var num = $(this).find(".mask span").text()*3.6;
            var num = $(this).find(".mask .cicleNum").text()*3.6;
            if(num<=180){
                if(num == 0){
                    $(this).find(".left").css({"transform":"rotate("+(num-180)+"deg)", "transition": "transform 0.5s ease-in"});
                    $(this).find(".right").css({"transform":"rotate("+(num-180)+"deg)","transition": "transform 0.5s ease"});
                }else{
                    $(this).find(".right").css("transform","rotate(180deg)");
                    $(this).find(".left").css({"transform":"rotate("+(180-num)+"deg)","transition": "transform 0.5s ease"});
                }
            }else{
                $(this).find(".left").css({"transform":"rotate(0deg)", "transition": "transform 0.5s ease-in"});
                $(this).find(".right").css({"transform":"rotate("+(360-num)+"deg)","transition": "transform 0.2s 0.5s ease-in"});
            }
        })
    })
</script>