.barspinner {
    margin: 50px auto;
    width: 60px;
    height: 20px;
    text-align: center;
    font-size: $FONT_SIZE_S;
    white-space: nowrap;

    & > div {
        margin: 2px;
        border-radius: 20px;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }
    &.dark > div {
        background-color: $primaryBrandColor;
    }
    &.white > div {
        background-color: $white;
    }
    .rect1 {
        -webkit-animation-delay: -1.2s;
        animation-delay: -1.2s;
    }
    .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }
    .rect3 {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }
    .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }
    .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    20% {
        -webkit-transform: scaleY(2);
        transform: scaleY(2);
    }
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    20% {
        -webkit-transform: scaleY(2);
        transform: scaleY(2);
    }
}