纯CSS3实现圆形进度条动画

开发者子寨技术 2022年11月7日

0 收藏 548 点赞 699 浏览 999 个字

悄悄地，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 个元素不断旋转导致的角度差，配合裁剪就能实现平滑的圆环长度变化效果。