纯 CSS3 实现 Flyme 风格的圆形进度条
时间：2015-01-23
来源：小影志
作者：佚名
悄悄地，GIF 格式的进度条已经越来越少，CSS 进度条如雨后春笋般涌现。今天要介绍的这个 CSS3 进度条，效果和 Flyme OS 4 上的加载动画一样。
首先，来看下最终的效果：
See the Pen Flyme OS4 Style Loading Spinner by Cople (@cople) on CodePen.
它的 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 个元素不断旋转导致的角度差，配合裁剪就能实现平滑的圆环长度变化效果。
慢动作、放大版：
See the Pen Flyme OS4 Style Loading Spinner by Cople (@cople) on CodePen.
PS: 你可以通过更改 .spinner 的 font-size 来缩放进度条的大小~ Enjoy ????
相关下载
相关文章
更多+软件排行榜
- 最新排行
- 最热排行
- 评分最高
-
手机软件 大小:20.76MB -
手机软件 大小:20.76MB
-
手机软件 大小:20.76MB
-
手机软件 大小:89.1MB
