.preloader {
    position  : fixed;
    top       : 0;
    left      : 0;
    z-index   : 9999;
    width     : 100%;
    height    : 100%;
    overflow  : hidden;
    background: #ffffff;

    .preloader-spin {
        display                    : -webkit-box;
        display                    : -ms-flexbox;
        display                    : flex;
        -webkit-box-align          : center;
        -ms-flex-align             : center;
        align-items                : center;
        -webkit-box-pack           : center;
        -ms-flex-pack              : center;
        justify-content            : center;
        width                      : 100%;
        height                     : 100%;
        position                   : relative;
        -webkit-backface-visibility: hidden;
        backface-visibility        : hidden;

        div {
            animation       : spin 1s linear infinite;
            width           : 60px;
            height          : 60px;
            border-radius   : 50%;
            box-shadow      : 0 4px 0 0 customColor(secondary);
            transform-origin: 30px 30px;
            box-sizing      : content-box;
        }
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform        : rotate(0deg);
    }

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

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

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform        : rotate(0deg);
    }

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

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