@import "../_variables";
@import "../_prefixer";
@import "../_mixins";

.loading {
    @include inline-block(middle);
    width: .4rem;
    height: .4rem;
    background-image: url(../../img/loading.png);
    background-size: 4.8rem .8rem;
    background-position-x: 0;
    background-position-y: 0;

    $props: (name: anim_loading, duration: 1600ms, iteration-count: infinite, timing-function: step-start);
    @each $prop, $val in $props {
        @include prefix(animation-#{$prop}, $val);
    }
}

@-webkit-keyframes anim_loading {
    0% {
        background-position-x: 0;
    }
    8.33% {
        background-position-x: -20px;
    }
    16.67% {
        background-position-x: -40px;
    }
    25% {
        background-position-x: -60px;
    }
    33.33% {
        background-position-x: -80px;
    }
    41.67% {
        background-position-x: -100px;
    }
    50% {
        background-position-x: -120px;
    }
    58.33% {
        background-position-x: -140px;
    }
    66.67% {
        background-position-x: -160px;
    }
    75% {
        background-position-x: -180px;
    }
    83.33% {
        background-position-x: -200px;
    }
    91.67% {
        background-position-x: -220px;
    }
}
