/*------------------------------------*\
    #Loading
\*------------------------------------*/
.preloader {
    width           : 100%;
    height          : 100%;
    left            : 0;
    top             : 0;
    position        : fixed;
    z-index         : 99999;
    background-color: $color-white;
    overflow        : hidden;

    .loader-spinner {
        width    : 59px;
        height   : 59px;
        transform: translate(-30px, -30px) scale(0.30) translate(30px, 30px);
        position : absolute;
        top      : 0;
        left     : 0;
        right    : 0;
        bottom   : 0;
        margin   : auto;

        >div {
            transform-origin: 100px 100px;
            animation       : loading-spinner 1s infinite linear;
            position        : relative;

            div {
                position  : absolute;
                width     : 26px;
                height    : 192px;
                background: $color-theme;
                left      : 100px;
                top       : 100px;
                transform : translate(-50%, -50%);

                &:nth-child(1) {
                    width        : 152px;
                    height       : 152px;
                    border-radius: 50%;
                }

                &:nth-child(3) {
                    transform        : translate(-50%, -50%) rotate(30deg);
                }

                &:nth-child(4) {
                    transform        : translate(-50%, -50%) rotate(60deg);
                }

                &:nth-child(5) {
                    transform        : translate(-50%, -50%) rotate(90deg);
                }

                &:nth-child(6) {
                    transform        : translate(-50%, -50%) rotate(120deg);
                }

                &:nth-child(7) {
                    transform        : translate(-50%, -50%) rotate(150deg);
                }

                &:nth-child(8) {
                    width        : 80px;
                    height       : 80px;
                    background   : $color-white;
                    border-radius: 50%;
                }
            }
        }
    }
}

@keyframes loading-spinner {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}