loading.css

@-webkit-keyframes ball-pulse-sync {
    33% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }

    66% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes ball-pulse-sync {
    33% {
        -webkit-transform: translateY(6px);
        transform: translateY(6px)
    }

    66% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}


.ball-pulse-sync>div:nth-child(1) {
    -webkit-animation: ball-pulse-sync .6s -.14s infinite ease-in-out;
    animation: ball-pulse-sync .6s -.14s infinite ease-in-out
}

.ball-pulse-sync>div:nth-child(2) {
    -webkit-animation: ball-pulse-sync .6s -70ms infinite ease-in-out;
    animation: ball-pulse-sync .6s -70ms infinite ease-in-out
}

.ball-pulse-sync>div:nth-child(3) {
    -webkit-animation: ball-pulse-sync .6s 0s infinite ease-in-out;
    animation: ball-pulse-sync .6s 0s infinite ease-in-out
}

.ball-pulse-sync>div {
    width: 8px;
    height: 8px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.ball-pulse-sync>div,.ball-pulse>div,.ball-scale-random>div,.ball-scale>div {
  background-color: #f28969;
  border-radius: 100%;
  margin: 2px;
  display: inline-block
}

.ball-pulse-sync {
  display: flex;
}