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

最新推荐文章于 2021-08-03 20:45:30 发布

weixin_30314793

最新推荐文章于 2021-08-03 20:45:30 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/h5monkey/p/6497375.html

版权

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

.spinner i:before {
    position: absolute;
    z-index: 2;
    clip: rect(0, 1em, 1em, .5em);
    width: 1em;
    height: 1em;
    content: '';
    animation: spinner-circle-clipper 5s ease-in-out infinite;
    background: rgba(255, 0, 0, .2);
}

@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 5s 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(360deg);
    }
}