.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-color: #000;
    z-index: 1100;
}

.loader td {
    vertical-align: middle;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
    width: 60px;
    height: 60px;
}

.logo-square,
.logo-circle {
    background-color: #fff;
    width: 8px;
    height: 8px;
    opacity: 0;
    margin-left: auto;
    margin-right: auto;
}

.logo-circle {
    border-radius: 50%;
    width: 9px;
    height: 9px;
}

.el1 {
    animation: fade1 1.5s linear infinite;
}

.el2 {
    animation: fade2 1.5s linear infinite;
}

.el3 {
    animation: fade3 1.5s linear infinite;
}

.el4 {
    animation: fade4 1.5s linear infinite;
}

.el5 {
    animation: fade5 1.5s linear infinite;
}

.el6 {
    animation: fade6 1.5s linear infinite;
}

.el7 {
    animation: fade7 1.5s linear infinite;
}

.el8 {
    animation: fade8 1.5s linear infinite;
}

.el9 {
    animation: fade9 1.5s linear infinite;
}

@keyframes fade1 {
    0%, 5% {
        opacity: 0
    }

    20%, 100% {
        opacity: 1
    }
}

@keyframes fade2 {
    0%, 10% {
        opacity: 0
    }

    30%, 100% {
        opacity: 1
    }
}

@keyframes fade3 {
    0%, 15% {
        opacity: 0
    }

    40%, 100% {
        opacity: 1
    }
}

@keyframes fade4 {
    0%, 20% {
        opacity: 0
    }

    50%, 100% {
        opacity: 1
    }
}

@keyframes fade5 {
    0%, 25% {
        opacity: 0
    }

    60%, 100% {
        opacity: 1
    }
}

@keyframes fade6 {
    0%, 30% {
        opacity: 0
    }

    70%, 100% {
        opacity: 1
    }
}

@keyframes fade7 {
    0%, 35% {
        opacity: 0
    }

    80%, 100% {
        opacity: 1
    }
}

@keyframes fade8 {
    0%, 40% {
        opacity: 0
    }

    90%, 100% {
        opacity: 1
    }
}

@keyframes fade9 {
    0%, 70% {
        opacity: 0
    }

    95%, 100% {
        opacity: 1
    }
}