纯 CSS3 实现 Flyme 风格的圆形进度条

悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现。今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样。

首先,来看下最终的效果:

它的 HTML 结构也很简单,但不是 Single Element:

 

<div class="spinner"><i></i></div>

外层元素 .spinner 负责显示底部的半透明圆环:

 

.spinner {
    font-size: 20px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .2);
}

.spinner 里的 i 元素被裁剪(clip)了一半,并做 0° 至 180° 的顺时钟旋转:

 

.spinner i {
    position: absolute;
    clip: rect(0, 1em, 1em, .5em);
    width: 1em;
    height: 1em;
    animation: spinner-circle-clipper 1s ease-in-out infinite;
}

@keyframes spinner-circle-clipper {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

i:after 伪元素同样被裁减了一半,并做 -180° 至 180° 的顺时钟旋转:

 

.spinner i:after {
    position: absolute;
    clip: rect(0, 1em, 1em, .5em);
    width: 1em;
    height: 1em;
    content: '';
    animation: spinner-circle 1s ease-in-out infinite;
    border-radius: 50%;
    box-shadow: inset 0 0 0 .1em #3aa8ed;
}

@keyframes spinner-circle {
    0% {
        transform: rotate(-180deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

代码就这么几行,通过 2 个元素不断旋转导致的角度差,配合裁剪就能实现平滑的圆环长度变化效果。

 

进度条的构成

慢动作、放大版:

PS: 你可以通过更改 .spinnerfont-size 来缩放进度条的大小~ Enjoy :smile:

发表评论

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


*