.loader {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 99999;
    display: none;
}

.loading-bars {
    text-align: center;
}

.bar {
    height: 20px;
    width: 10px;
    background: #CCF2FF;
    display: inline-block;
    animation: pulse 1.3s infinite ease-out;
    -webkit-animation: pulse 1.3s infinite ease-out;
}

@keyframes {
    0%, 75% transform: scale(1, 1) 25% transform: scale(1, 3)
}



/* Chrome, Safari, Opera */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1, 1);
    }

    75% {
        -webkit-transform: scale(1, 1);
    }

    25% {
        -webkit-transform: scale(1, 3);
    }
}

/* Standard syntax */
@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }

    75% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(1, 3);
    }
}

.bar1 {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

.bar2 {
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

.bar3 {
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}

.bar4 {
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}

.bar5 {
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}