@keyframes loading {
    0% { transform: translate(45px,30px) scale(0); }
    25% { transform: translate(45px,30px) scale(0); }
    50% { transform: translate(45px,30px) scale(1); }
    75% { transform: translate(180px,30px) scale(1); }
    100% { transform: translate(320px,30px) scale(1); }
}
@keyframes loading-r {
    0% { transform: translate(320px,30px) scale(1); }
    90% { transform: translate(320px,30px) scale(0); }
}
@keyframes loading-c {
    0% { background: #e15b64 }
    25% { background: #abbd81 }
    50% { background: #f8b26a }
    75% { background: #f47e60 }
    100% { background: #e15b64 }
}
.loading div {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translate(180px,30px) scale(1);
    background: #e15b64;
    animation: loading 3.3333333333333335s infinite cubic-bezier(0,0.5,0.5,1);
}
.loading div:nth-child(1) {
    background: #f47e60;
    transform: translate(320px,30px) scale(1);
    animation: loading-r 0.8333333333333334s infinite cubic-bezier(0,0.5,0.5,1), loading-c 3.3333333333333335s infinite step-start;
}.loading div:nth-child(2) {
    animation-delay: -0.8333333333333334s;
    background: #e15b64;
}.loading div:nth-child(3) {
    animation-delay: -1.6666666666666667s;
    background: #f47e60;
}.loading div:nth-child(4) {
    animation-delay: -2.5s;
    background: #f8b26a;
}.loading div:nth-child(5) {
    animation-delay: -3.3333333333333335s;
    background: #abbd81;
}
.loading-container {
    width: 125px;
    height: 30px;
    display: inline-block;
    overflow: hidden;
    background: transparent;
    /* margin:auto 0; */
}
.loading {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(0.3);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
}
.loading div { box-sizing: content-box; }
/* generated by https://loading.io/ */