.loading-pop-up {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 6000;
    display: none;
}

.loader-transporter {
    width: 72px;
    height: 8px;
    display: inline-block;
    padding: 0px;
    text-align: left;
}

    .loader-transporter span {
        position: absolute;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background: white;
        opacity: 0.2;
        -webkit-animation: loader-transporter1 2s linear infinite alternate;
        animation: loader-transporter1 2s linear infinite alternate;
    }

        .loader-transporter span:nth-child(2) {
            animation-name: loader-transporter2;
            -webkit-animation-name: loader-transporter2;
        }

        .loader-transporter span:nth-child(3) {
            animation-name: loader-transporter3;
            -webkit-animation-name: loader-transporter3;
        }

        .loader-transporter span:nth-child(4) {
            animation-name: loader-transporter4;
            -webkit-animation-name: loader-transporter4;
        }

        .loader-transporter span:nth-child(5) {
            animation-name: loader-transporter5;
            -webkit-animation-name: loader-transporter5;
        }

.loading-gif {
    width: 70px;
    margin: 0 auto;
    margin-top: 150px;
    text-align: center;
}



@keyframes loader-transporter1 {
    0% {
        margin-left: 0px;
    }

    50% {
        margin-left: 64px;
    }

    100% {
        margin-left: 64px;
    }
}

@-webkit-keyframes loader-transporter1 {
    0% {
        margin-left: 0px;
    }

    50% {
        margin-left: 64px;
    }

    100% {
        margin-left: 64px;
    }
}

@keyframes loader-transporter2 {
    0% {
        margin-left: 0px;
    }

    37.5% {
        margin-left: 48px;
    }

    87.5% {
        margin-left: 48px;
    }

    100% {
        margin-left: 64px;
    }
}

@-webkit-keyframes loader-transporter2 {
    0% {
        margin-left: 0px;
    }

    37.5% {
        margin-left: 48px;
    }

    87.5% {
        margin-left: 48px;
    }

    100% {
        margin-left: 64px;
    }
}

@keyframes loader-transporter3 {
    0% {
        margin-left: 0px;
    }

    25% {
        margin-left: 32px;
    }

    75% {
        margin-left: 32px;
    }

    100% {
        margin-left: 64px;
    }
}

@-webkit-keyframes loader-transporter3 {
    0% {
        margin-left: 0px;
    }

    25% {
        margin-left: 32px;
    }

    75% {
        margin-left: 32px;
    }

    100% {
        margin-left: 64px;
    }
}

@keyframes loader-transporter4 {
    0% {
        margin-left: 0px;
    }

    12.5% {
        margin-left: 16px;
    }

    62.5% {
        margin-left: 16px;
    }

    100% {
        margin-left: 64px;
    }
}

@-webkit-keyframes loader-transporter4 {
    0% {
        margin-left: 0px;
    }

    12.5% {
        margin-left: 16px;
    }

    62.5% {
        margin-left: 16px;
    }

    100% {
        margin-left: 64px;
    }
}

@keyframes loader-transporter5 {
    0% {
        margin-left: 0px;
    }

    50% {
        margin-left: 0px;
    }

    100% {
        margin-left: 64px;
    }
}

@-webkit-keyframes loader-transporter5 {
    0% {
        margin-left: 0px;
    }

    50% {
        margin-left: 0px;
    }

    100% {
        margin-left: 64px;
    }
}