css3实现圆环加载进度条动画

最近有人问我关于css3圆环的问题，要实现一个圆环，并且有加载特效。于是我看了看一般关于圆环实现的原理，以及自己手写了一个加载动画。可能体验还不是特别好，但是能用。话不多说，一下是代码：

html结构：

<div class="circle">
    <div class="left">
        <div class="left_con"></div>
    </div>
    <div class="right">
        <div class="right_con"></div>
    </div>
    <div class="mask">
        <span>60</span>%
    </div>
</div>

css：

.circle{
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 50%;
    background:  rgba(0,