.loader {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

    .loader span {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #008000;
        display: inline-block;
    }

        .loader span:first-child {
            animation: loading-2 0.5s linear infinite;
            opacity: 0;
            transform: translate(-20px);
        }

        .loader span:nth-child(2),
        .loader span:nth-child(3) {
            animation: loading-3 0.5s linear infinite;
        }

        .loader span:last-child {
            animation: loading-1 0.5s linear infinite;
        }

@-webkit-keyframes loading-1 {
    100% {
        transform: translate(40px);
        opacity: 0;
    }
}

@keyframes loading-1 {
    100% {
        transform: translate(40px);
        opacity: 0;
    }
}

@-webkit-keyframes loading-2 {
    100% {
        transform: translate(20px);
        opacity: 1;
    }
}

@keyframes loading-2 {
    100% {
        transform: translate(20px);
        opacity: 1;
    }
}

@-webkit-keyframes loading-3 {
    100% {
        transform: translate(20px);
    }
}

@keyframes loading-3 {
    100% {
        transform: translate(20px);
    }
}