loading动态加载效果

<div class="loading">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #66c7f4;
}

$ballSize: 10px;
$containerSize: 150px;
$n: 36;
$pDeg: 360deg / $n;
$duration: 2s;
.loading {
    width: $containerSize;
    height: $containerSize;
    // border: 1px solid #fff;
    margin: 50px auto;
    position: relative;
    border-radius: 50%;

    .dot {
        position: absolute;
        left: 50%;
        top: 0;
        width: $ballSize;
        height: $ballSize;
        margin-left: -$ballSize / 2;
        margin-top: -$ballSize / 2;
        // background: #f40;
        transform-origin: center $containerSize / 2 + $ballSize / 2;
        perspective: 70px;
        transform-style: preserve-3d;

        @for $i from 1 through $n {
            &:nth-child(#{$i}) {
                transform: rotate(#{(($i - 1) * $pDeg)});

                &::before,
                &::after {
                    animation-delay: -$duration / $n * ($i - 1) * 6;
                }
            }
        }

        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        &::before {
            background: #000;
            top: -100%;
            animation: move-black $duration linear infinite;

            @keyframes move-black {
                0% {
                    animation-timing-function: ease-in;
                }

                35% {
                    transform: translate3d(0, 100%, $ballSize);
                    animation-timing-function: ease-out;
                }

                50% {
                    transform: translate3d(0, 200%, 0);
                    animation-timing-function: ease-in;
                }

                75% {
                    transform: translate3d(0, 100%, -$ballSize);
                    animation-timing-function: ease-out;
                }
            }
        }

        &::after {
            background: #fff;
            top: 100%;
            animation: move-white $duration linear infinite;

            @keyframes move-white {
                0% {
                    animation-timing-function: ease-in;
                }

                35% {
                    transform: translate3d(0, -100%, -$ballSize);
                    animation-timing-function: ease-out;
                }

                50% {
                    transform: translate3d(0, -200%, 0);
                    animation-timing-function: ease-in;
                }

                75% {
                    transform: translate3d(0, -100%, $ballSize);
                    animation-timing-function: ease-out;
                }
            }
        }
    }
}