Circle 进度环–css篇

网上有各种进度,进度条啊,进度环,进度条做起来简单,可是有很多时候需要的是进度环,本篇是用css3的效果结合js完成进度环的。
废话不多说了,上结构
html:

<div class="loading">
    <div class="left"><span></span></div>
    <div class="right"><span></span></div>
    <div class="progress"><span>0</span>%</div>
</div>

大概结构是这样的(图烂勿怪,我画图烂的有一手,(ノへ ̄、)
结构
css:

.loading{
    margin: 10px auto;
    width: 150px;
    height: 150px;
    position: relative;
    background-color: #FFF;
}
.progress{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 130px;
    transform: translate(-50%,-50%);
    color: red;
    line-height: 130px;
    text-align: center;
    background-color: #FFF;
    border-radius: 50%;
}
.left,.right{
    float: left;
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.left span,.right span{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
    transition: all 0.4s;
}
.left span{
    border-radius:150px 0 0 150px;
    transform-origin: right;
}
.right span{
    border-radius:0 150px 150px 0;
    transform-origin: left;
}

主要的原理就是让.left.rightspan通过transform: rotateZ旋转角度,一开始.left span旋转180度到.right那边,然后通过overflow: hidden使其超过的隐藏,此时.left span完全在.left外面,完全隐藏了,然后通过减小.left span的旋转角度,让其在.left中显现出来,.right span同理。其实本来显示的会是一个扇形,但是由于有.progress这个白色的圆覆盖在.loading上面,就变成了圆环。

实现效果如下,可以在输入框输入:(本人对颜色极其不敏感,红色不好看就不要吐槽了,自己改)

本文示例:链接
本文代码地址:链接

您也可能喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注