纯CSS3 实现圆形进度条

发表于 2016-12-29 16:00 显示全部楼层 25 2390

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

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

blob.png

不会动对不对,那是因为我懒啊不想截动态图啊!!!(别打我→_→)


下面附上html代码:

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

css代码:

.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 {
    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);
    }}
.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);
    }}

思路:

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

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

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


最后, 你可以通过更改 .spinner 的 font-size 来缩放进度条的大小


END

回复 使用道具
举报
判断力的救赎

发表于 2017-02-08 17:25 显示全部楼层

回复 支持 反对 使用道具
举报
cocoabird

发表于 2017-02-08 17:18 显示全部楼层

回复 支持 反对 使用道具
举报
TigerCY

发表于 2017-02-08 16:34 显示全部楼层

支持!支持!!

回复 支持 反对 使用道具
举报
ttplayboy

发表于 2017-02-08 15:10 显示全部楼层

无需回复的,我们保持沉默,如需回复的,就回21个字!

回复 支持 反对 使用道具
举报
肆无忌惮的潘

发表于 2017-02-08 14:36 显示全部楼层

顶!顶!顶!

回复 支持 反对 使用道具
举报
追风筝的孩子

发表于 2017-02-08 08:59 显示全部楼层

前排支持!!

回复 支持 反对 使用道具
举报
我不想静静

发表于 2017-02-08 06:50 显示全部楼层

  ╭══╮ ┌══════┐

  ╭╯让路║═‖ 酱油专用车 ‖

  ╰⊙═⊙╯ └══⊙═⊙═~. 作为一个资深的酱油党,我们需要做的不仅仅是路过,在路过的同时 还要关心楼主,鼓励楼主,在这个冷漠的时代,给予楼主温暖。酱油党莅临的地方,不仅仅是挽尊,不仅仅是消灭零回复,酱油

回复 支持 反对 使用道具
举报
ttplayboy

发表于 2017-02-08 04:47 显示全部楼层

给楼主32个赞!!!!!

回复 支持 反对 使用道具
举报
凉月流沐

发表于 2017-02-08 02:43 显示全部楼层

支持!支持!!

回复 支持 反对 使用道具
举报
123下一页

发表新文章
大版主

超级版主

200

学分

6894

学币

8371

积分

超级版主

Rank: 8Rank: 8

积分
8371

签到之王勋章关注叩丁狼教育公众号关注新浪微博叩丁狼一周年勋章活动达人勋章叩丁狼版主勋章前100注册用户勋章意见领袖勋章论坛荣誉内测勋章叩丁狼网页UI学员勋章论坛百帖达成勋章真土豪勋章勋章签到周冠军勋章签到月冠军勋章签到超新星勋章叩丁狼周年庆杯子叩丁狼周年庆纪念勋章叩丁狼周年庆手机壳叩丁狼周年庆鼠标垫叩丁狼周年庆T恤

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注叩丁狼教育