下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

body {
    background: skyblue;
}

@keyframes rotate {
    from {
        transform: none;
    }
    to {
        transform: rotate(1turn);
    }
}

@keyframes scale {
    from,to {
        transform: none;
    }
    25% {
        transform: scale(.35);
    }
}

@keyframes show {
    from,50% {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}

$width: 80px;

.loading {
    width: $width;
    height: $width;
    position: relative;
    margin: 50px auto;

    > div {
        width: 0;
        height: 0;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0 auto;
        position: relative;

        transform-origin: center ($width / 2);
        animation: rotate 2s infinite;

        @for $idx from 1 through 8 {
            &:nth-child(#{$idx}),&:nth-child(#{$idx})::after {
                animation-delay: $idx * .09s + 1s;
            }
        }

        &::after {
            content: "";
            display: block;
            position: absolute;
            left: -$width / 8;
            right: -$width / 8;
            top: -$width / 8;
            bottom: -$width / 8;
            background: white;
            border-radius: 50%;
            Box-shadow: rgba(255,255,.5) 0 0 2px;

            animation: scale 2s infinite ease-in-out;
        }
    }

    > span {
        position: absolute;
        bottom: -$width / 2;
        left: 0;
        right: 0;
        text-align: center;
        color: white;
        font-family: sans-serif;

        span {
            animation: show 2s infinite;

            @for $idx from 1 through 3 {
                &:nth-child(#{$idx}),&:nth-child(#{$idx})::after {
                    animation-delay: $idx * .3s + 1s;
                }
            }
        }
    }
}

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。