Fork me on GitHub

CSS3创建圆圈进度条

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

我们知道CSS3可以很方便的画圆,圆环,然后在加上一个旋转动画不就可以实现了吗?
于是先把圆环画出来了

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

此时当我们再旋转的时候发现,圆环可以实现一点一点的消失了,但是当转过一个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控制的,这样可以根据后台下发的时间值来倒计时,非常方便。
posted @ 2018-05-23 20:39  Jesse131  阅读(1251)  评论(0编辑  收藏  举报