Loader..

style.scss

.wrap {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0
}

.translate {
    -webkit-animation: translate 2000ms cubic-bezier(.6, -.28, .735, .045) infinite;
    animation: translate 2000ms cubic-bezier(.6, -.28, .735, .045) infinite;
    bottom: 0;
    height: 14px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 14px
}

.scale {
    -webkit-animation: scale 2000ms cubic-bezier(.6, -.28, .735, .045) infinite;
    animation: scale 2000ms cubic-bezier(.6, -.28, .735, .045) infinite;
    height: 100%;
    width: 100%
}

.wrap:nth-child(1) {
    -webkit-transform: rotate(320deg);
    transform: rotate(320deg);
}

.wrap:nth-child(1) .scale, .wrap:nth-child(1) .translate {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms
}

.wrap:nth-child(1) .scale {
    background: #fff
}

.wrap:nth-child(2) {
    -webkit-transform: rotate(280deg);
    transform: rotate(280deg)
}

.wrap:nth-child(2) .scale, .wrap:nth-child(2) .translate {
    -webkit-animation-delay: -222.22222ms;
    animation-delay: -222.22222ms
}

.wrap:nth-child(2) .scale {
    background: #fff
}

.wrap:nth-child(3) {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg)
}

.wrap:nth-child(3) .scale, .wrap:nth-child(3) .translate {
    -webkit-animation-delay: -444.44444ms;
    animation-delay: -444.44444ms
}

.wrap:nth-child(3) .scale {
    background: #fff
}

.wrap:nth-child(4) {
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg)
}

.wrap:nth-child(4) .scale, .wrap:nth-child(4) .translate {
    -webkit-animation-delay: -666.66667ms;
    animation-delay: -666.66667ms
}

.wrap:nth-child(4) .scale {
    background: #fff
}

.wrap:nth-child(5) {
    -webkit-transform: rotate(160deg);
    transform: rotate(160deg)
}

.wrap:nth-child(5) .scale, .wrap:nth-child(5) .translate {
    -webkit-animation-delay: -888.88889ms;
    animation-delay: -888.88889ms
}

.wrap:nth-child(5) .scale {
    background: #fff
}

.wrap:nth-child(6) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg)
}

.wrap:nth-child(6) .scale, .wrap:nth-child(6) .translate {
    -webkit-animation-delay: -1111.11111ms;
    animation-delay: -1111.11111ms
}

.wrap:nth-child(6) .scale {
    background: #fff
}

.wrap:nth-child(7) {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg)
}

.wrap:nth-child(7) .scale, .wrap:nth-child(7) .translate {
    -webkit-animation-delay: -1333.33333ms;
    animation-delay: -1333.33333ms
}

.wrap:nth-child(7) .scale {
    background: #fff
}

.wrap:nth-child(8) {
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg)
}

.wrap:nth-child(8) .scale, .wrap:nth-child(8) .translate {
    -webkit-animation-delay: -1555.55556ms;
    animation-delay: -1555.55556ms
}

.wrap:nth-child(8) .scale {
    background: #fff
}

.wrap:nth-child(9) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.wrap:nth-child(9) .scale, .wrap:nth-child(9) .translate {
    -webkit-animation-delay: -1777.77778ms;
    animation-delay: -1777.77778ms
}

.wrap:nth-child(9) .scale {
    background: #fff
}

@-webkit-keyframes translate {
    0% {
        -webkit-transform: translate3d(-600%, 0, 0);
        transform: translate3d(-600%, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(600%, 0, 0);
        transform: translate3d(600%, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(-600%, 0, 0);
        transform: translate3d(-600%, 0, 0)
    }
}

@keyframes translate {
    0% {
        -webkit-transform: translate3d(-600%, 0, 0);
        transform: translate3d(-600%, 0, 0)
    }

    50% {
        -webkit-transform: translate3d(600%, 0, 0);
        transform: translate3d(600%, 0, 0)
    }

    100% {
        -webkit-transform: translate3d(-600%, 0, 0);
        transform: translate3d(-600%, 0, 0)
    }
}

@-webkit-keyframes scale {
    0% {
        -webkit-transform: translateZ(0) scale(.75, 1);
        transform: translateZ(0) scale(.75, 1)
    }

    25% {
        -webkit-transform: translateZ(0) scale(1.5, .5);
        transform: translateZ(0) scale(1.5, .5)
    }

    50% {
        -webkit-transform: translateZ(0) scale(.75, 1);
        transform: translateZ(0) scale(.75, 1)
    }

    75% {
        -webkit-transform: translateZ(0) scale(1.5, .5);
        transform: translateZ(0) scale(1.5, .5)
    }

    100% {
        -webkit-transform: translateZ(0) scale(.75, 1);
        transform: translateZ(0) scale(.75, 1)
    }
}

@keyframes scale {
    0% {
        -webkit-transform: translateZ(0) scale(.75, 1);
        transform: translateZ(0) scale(.75, 1)
    }

    25% {
        -webkit-transform: translateZ(0) scale(1.5, .5);
        transform: translateZ(0) scale(1.5, .5)
    }

    50% {
        -webkit-transform: translateZ(0) scale(.75, 1);
        transform: translateZ(0) scale(.75, 1)
    }

    75% {
        -webkit-transform: translateZ(0) scale(1.5, .5);
        transform: translateZ(0) scale(1.5, .5)
    }

    100% {
        -webkit-transform: translateZ(0) scale(.75, 1);
        transform: translateZ(0) scale(.75, 1)
    }
}