CSS实心小圆点依次出现动画

<template>
    <div class="loadings">
        <div class="loading5">
            <div class="loading-circle"></div>
            <div class="loading-circle"></div>
            <div class="loading-circle"></div>
            <div class="loading-circle"></div>
            <div class="loading-circle"></div>
            <div class="loading-circle"></div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="scss">
.loadings {
    border: 1px solid red;
    width:100%;
    height: 100px;
}
.loading5 {
    height: 85px;
    width: 85px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loading-circle {
    animation: 2291ms loading infinite;
    background-color: rgb(150, 145, 145);
    border-radius: 50%;
    height: 14px;
    width: 14px;
}
.loading-circle:nth-child(1) {
    -webkit-animation-delay: 42ms;
    animation-delay: 42ms;
}
.loading-circle:nth-child(2) {
    -webkit-animation-delay: 126ms;
    animation-delay: 126ms;
}
.loading-circle:nth-child(3) {
    -webkit-animation-delay: 294ms;
    animation-delay: 294ms;
}

.loading-circle:nth-child(4) {
    -webkit-animation-delay: 462ms;
    animation-delay: 462ms;
}

.loading-circle:nth-child(5) {
    -webkit-animation-delay: 546ms;
    animation-delay: 546ms;
}
.loading-circle:nth-child(6) {
    -webkit-animation-delay: 646ms;
    animation-delay: 646ms;
}
@keyframes loading {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    27.28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    36.36% {
        -webkit-transform: scale(0.857);
        transform: scale(0.857);
    }
    54.55% {
        -webkit-transform: scale(0.857);
        transform: scale(0.857);
    }
    63.64% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
</style>