CSS3创建圆圈进度条

最近在工作中需要做一个圆圈倒计时，刚开始的想法是做个纯数字的倒计时即可，可是需求觉得这个不太好看，想加个倒计时进度条。于是就有了接下来的分析过程...

我们知道CSS3可以很方便的画圆，圆环，然后在加上一个旋转动画不就可以实现了吗？

于是先把圆环画出来了

做到这里问题又来了，如何让红色的圆环一点一点的消失呢？此处一个圆环再怎么旋转终究是一个圆环，
此时觉得一个圆可能不够，何不在画一个白色的半圆再旋转呢？可是白色的半圆又如何一点一点的显示呢?貌似又回到了问题的起点。
我们知道overflow：hidden;可以让多余的部分隐藏，如果在配合两个半圆旋转不就可以实现了吗？
先画两个半圆试试
左半圆

右半圆

如果都顺时针旋转45度再刚刚好拼在一起就是一个完整的圆环

.circleProgress_wrapper{
width: 160px;
height: 160px;
margin: 10px auto;
position: relative;
}
.wrapper{
width: 80px;
height: 160px;
position: absolute;
top:0;
/*overflow: hidden;*/
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
/*transform: rotate(45deg);*/
}
.rightcircle{
border-top:20px solid red;
border-right:20px solid red;
right:0;
animation: circleProgressLoad_right 6s linear infinite;
}
.leftcircle{
border-bottom:20px solid red;
border-left:20px solid red;
left:0;
animation: circleProgressLoad_left 6s linear infinite;
}

此时当我们再旋转的时候发现，圆环可以实现一点一点的消失了，但是当转过一个180度的时候这个半圆右出现了，此时我们可以用到前面的overflow:hidden;

CSS代码如下

.circleProgress_wrapper{
    width: 160px;
    height: 160px;
    margin: 10px auto;
    position: relative;
}
.wrapper{
    width: 80px;
    height: 160px;
    position: absolute;
    top:0;
    overflow: hidden;
}
.right{
    right:0;
}
.left{
    left:0;
}
.circleProgress{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    /*transform: rotate(45deg);*/
}
 .rightcircle{
    border-top:20px solid red;
    border-right:20px solid red;
    right:0;
    animation: circleProgressLoad_right 6s linear infinite;
}
.leftcircle{
    border-bottom:20px solid red;
    border-left:20px solid red;
    left:0;
    animation: circleProgressLoad_left 6s linear infinite;
}

接下来用css3写个旋转动画即可

 .rightcircle{
    border-top:20px solid red;
    border-right:20px solid red;
    right:0;
    animation: circleProgressLoad_right 6s linear infinite;
}
.leftcircle{
    border-bottom:20px solid red;
    border-left:20px solid red;
    left:0;
    animation: circleProgressLoad_left 6s linear infinite;
}
@keyframes circleProgressLoad_right{
    0%{
        transform: rotate(45deg);
    }
    50%,100%{
        transform: rotate(225deg);
    }
}
@keyframes circleProgressLoad_left{
    0%,50%{
        transform: rotate(45deg);
    }
    100%{
        transform: rotate(225deg);
    }
}

完整的demo可以查看下面的实例

目前这里的倒计时动画是动画时间是6s，这里可以根据需要自行修改，这里的运行时间我在项目中是用js控制的，这样可以根据后台下发的时间值来倒计时，非常方便。