﻿.loader-container {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #121212;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.loader {
    position: relative;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-gap: 2px;
}

    .loader > div {
        position: relative;
        width: 100%;
        height: 100%;
        background: #CA9A62;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: center center;
        -moz-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation: loader 2s infinite linear;
        -moz-animation: loader 2s infinite linear;
        animation: loader 2s infinite linear;
    }

        .loader > div:nth-of-type(1), .loader > div:nth-of-type(5), .loader > div:nth-of-type(9) {
            -webkit-animation-delay: 0.4s;
            -moz-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }

        .loader > div:nth-of-type(4), .loader > div:nth-of-type(8) {
            -webkit-animation-delay: 0.2s;
            -moz-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        .loader > div:nth-of-type(2), .loader > div:nth-of-type(6) {
            -webkit-animation-delay: 0.6s;
            -moz-animation-delay: 0.6s;
            animation-delay: 0.6s;
        }

        .loader > div:nth-of-type(3) {
            -webkit-animation-delay: 0.8s;
            -moz-animation-delay: 0.8s;
            animation-delay: 0.8s;
        }

@keyframes loader {
    0% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
    }

    40% {
        transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
    }

    80% {
        transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
    }

    100% {
        transform: scale(0);
        -moz-transform: scale(0);
        -webkit-transform: scale(0);
    }
}
