清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

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, 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;
                }
            }
        }
    }
}