纯css3实现的圆形进度条-蒲公英云

纯css3实现的圆形进度条

向右看齐 2022-08-03 03:10 379阅读 0赞

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/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;
                width:1em;
                height:1em;
                clip: rect(0, 1em, 1em, .5em);
                animation: spinner-circle-clipper 1s ease-in-out infinite;
            }
            @keyframes spinner-circle-clipper {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(180deg);
                }
            }
            .spinner i:after { /*l蓝色的半圆弧*/
                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);
                }
            }
        </style>
    </head>
    <body>
        <div class="spinner"><i></i></div>
    </body>
</html>