.modal-loader-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.36);
    visibility: hidden;
    opacity: 0;
    z-index: 9999999;
    &.show {
        visibility: visible;
        opacity: 1;
    }
    .modal-loader {
        text-align: center;
        background: #FFF;
        position: absolute;
        left: 50%;
        top: 50%;
        padding: 30px;
        transform: translate(-50%, -50%);
        .loader-bullets {
            margin-top: 20px;
        }
    }
}

.loader-bullets {
    margin: auto auto auto -21px;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-animation: loading-dots-fadein .5s linear forwards;
    animation: loading-dots-fadein .5s linear forwards;
    direction: ltr
}

.loader-bullet {
    border-radius: 100%;
    overflow: hidden;
    background-color: $danger;
    width: 7px;
    height: 7px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
    -webkit-animation: loading-dots-middle-dots .5s ease-in-out infinite;
    animation: loading-dots-middle-dots .5s ease-in-out infinite
}

.loader-bullet:first-child {
    -webkit-animation: loading-dots-first-dot .5s ease-in-out infinite;
    animation: loading-dots-first-dot .5s ease-in-out infinite;
    opacity: 0;
    -webkit-transform: translate(-14px);
    transform: translate(-14px)
}

.loader-bullet:last-child {
    -webkit-animation: loading-dots-last-dot .5s ease-in-out infinite;
    animation: loading-dots-last-dot .5s ease-in-out infinite
}

@-webkit-keyframes loading-dots-fadein {
    to {
        opacity: 1
    }
}

@keyframes loading-dots-fadein {
    to {
        opacity: 1
    }
}

@-webkit-keyframes loading-dots-first-dot {
    to {
        -webkit-transform: translateX(14px);
        transform: translateX(14px);
        opacity: 1
    }
}

@keyframes loading-dots-first-dot {
    to {
        -webkit-transform: translateX(14px);
        transform: translateX(14px);
        opacity: 1
    }
}

@-webkit-keyframes loading-dots-middle-dots {
    to {
        -webkit-transform: translateX(14px);
        transform: translateX(14px)
    }
}

@keyframes loading-dots-middle-dots {
    to {
        -webkit-transform: translateX(14px);
        transform: translateX(14px)
    }
}

@-webkit-keyframes loading-dots-last-dot {
    to {
        -webkit-transform: translateX(28px);
        transform: translateX(28px);
        opacity: 0
    }
}

@keyframes loading-dots-last-dot {
    to {
        -webkit-transform: translateX(28px);
        transform: translateX(28px);
        opacity: 0
    }
}