.bg_load {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(238, 238, 238); /* Fallback color */
    background-color: rgba(238, 238, 238,0.98); /* Black w/ opacity */
    /*background-color: rgba(199, 231, 129,0.97);*/
    z-index: 1000;
}

.loader {
    position: fixed;
    z-index: 2000;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    border: 1px solid rgba(149, 214, 0,0.5);
    padding: 7px;
}

    .loader span {
        display: inline-block;
        width: 10px;
        height: 40px;
    }

        .loader span.item-1 {
            background:#c8ef6e; /*#2ecc71;*/
            animation-name: scale;
            animation-timing-function: linear;
            animation-duration: 1.2s;
            animation-iteration-count: infinite;
            animation-delay: -0.9s;
            -webkit-animation-name: scale;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration: 1.2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: -0.9s;
            -moz-animation-name: scale;
            -moz-animation-timing-function: linear;
            -moz-animation-duration: 1.2s;
            -moz-animation-iteration-count: infinite;
            -moz-animation-delay: -0.9s;
            -ms-animation-name: scale;
            -ms-animation-timing-function: linear;
            -ms-animation-duration: 1.2s;
            -ms-animation-iteration-count: infinite;
            -ms-animation-delay: -0.9s;
            -o-animation-name: scale;
            -o-animation-timing-function: linear;
            -o-animation-duration: 1.2s;
            -o-animation-iteration-count: infinite;
            -o-animation-delay: -0.9s;
        }

        .loader span.item-2 {
            background:#b4ed2f; /*#3498db;*/
            animation-name: scale;
            animation-timing-function: linear;
            animation-duration: 1.2s;
            animation-iteration-count: infinite;
            animation-delay: -0.8s;
            -webkit-animation-name: scale;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration: 1.2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: -0.8s;
            -moz-animation-name: scale;
            -moz-animation-timing-function: linear;
            -moz-animation-duration: 1.2s;
            -moz-animation-iteration-count: infinite;
            -moz-animation-delay: -0.8s;
            -ms-animation-name: scale;
            -ms-animation-timing-function: linear;
            -ms-animation-duration: 1.2s;
            -ms-animation-iteration-count: infinite;
            -ms-animation-delay: -0.8s;
            -o-animation-name: scale;
            -o-animation-timing-function: linear;
            -o-animation-duration: 1.2s;
            -o-animation-iteration-count: infinite;
            -o-animation-delay: -0.8s;
        }

        .loader span.item-3 {
            background:#b3e83a; /*#9b59b6;*/
            animation-name: scale;
            animation-timing-function: linear;
            animation-duration: 1.2s;
            animation-iteration-count: infinite;
            animation-delay: -0.7s;
            -webkit-animation-name: scale;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration: 1.2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: -0.7s;
            -moz-animation-name: scale;
            -moz-animation-timing-function: linear;
            -moz-animation-duration: 1.2s;
            -moz-animation-iteration-count: infinite;
            -moz-animation-delay: -0.7s;
            -ms-animation-name: scale;
            -ms-animation-timing-function: linear;
            -ms-animation-duration: 1.2s;
            -ms-animation-iteration-count: infinite;
            -ms-animation-delay: -0.7s;
            -o-animation-name: scale;
            -o-animation-timing-function: linear;
            -o-animation-duration: 1.2s;
            -o-animation-iteration-count: infinite;
            -o-animation-delay: -0.7s;
        }

        .loader span.item-4 {
            background: #b7dd5d;/*#e67e22;*/
            animation-name: scale;
            animation-timing-function: linear;
            animation-duration: 1.2s;
            animation-iteration-count: infinite;
            animation-delay: -0.6s;
            -webkit-animation-name: scale;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration: 1.2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: -0.6s;
            -moz-animation-name: scale;
            -moz-animation-timing-function: linear;
            -moz-animation-duration: 1.2s;
            -moz-animation-iteration-count: infinite;
            -moz-animation-delay: -0.6s;
            -ms-animation-name: scale;
            -ms-animation-timing-function: linear;
            -ms-animation-duration: 1.2s;
            -ms-animation-iteration-count: infinite;
            -ms-animation-delay: -0.6s;
            -o-animation-name: scale;
            -o-animation-timing-function: linear;
            -o-animation-duration: 1.2s;
            -o-animation-iteration-count: infinite;
            -o-animation-delay: -0.6s;
        }

        .loader span.item-5 {
            background:#afdd42; /*#c0392b;*/
            animation-name: scale;
            animation-timing-function: linear;
            animation-duration: 1.2s;
            animation-iteration-count: infinite;
            animation-delay: -0.5s;
            -webkit-animation-name: scale;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration: 1.2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: -0.5s;
            -moz-animation-name: scale;
            -moz-animation-timing-function: linear;
            -moz-animation-duration: 1.2s;
            -moz-animation-iteration-count: infinite;
            -moz-animation-delay: -0.5s;
            -ms-animation-name: scale;
            -ms-animation-timing-function: linear;
            -ms-animation-duration: 1.2s;
            -ms-animation-iteration-count: infinite;
            -ms-animation-delay: -0.5s;
            -o-animation-name: scale;
            -o-animation-timing-function: linear;
            -o-animation-duration: 1.2s;
            -o-animation-iteration-count: infinite;
            -o-animation-delay: -0.5s;
        }

        .loader span.item-6 {
            background: #9dd31d; /*#e74c3c;*/
            animation-name: scale;
            animation-timing-function: linear;
            animation-duration: 1.2s;
            animation-iteration-count: infinite;
            animation-delay: -0.4s;
            -webkit-animation-name: scale;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration: 1.2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: -0.4s;
            -moz-animation-name: scale;
            -moz-animation-timing-function: linear;
            -moz-animation-duration: 1.2s;
            -moz-animation-iteration-count: infinite;
            -moz-animation-delay: -0.4s;
            -ms-animation-name: scale;
            -ms-animation-timing-function: linear;
            -ms-animation-duration: 1.2s;
            -ms-animation-iteration-count: infinite;
            -ms-animation-delay: -0.4s;
            -o-animation-name: scale;
            -o-animation-timing-function: linear;
            -o-animation-duration: 1.2s;
            -o-animation-iteration-count: infinite;
            -o-animation-delay: -0.4s;
        }

        .loader span.item-7 {
            background:#95d600; /*#e74c8c;*/
            animation-name: scale;
            animation-timing-function: linear;
            animation-duration: 1.2s;
            animation-iteration-count: infinite;
            animation-delay: -0.3s;
            -webkit-animation-name: scale;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration: 1.2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-delay: -0.3s;
            -moz-animation-name: scale;
            -moz-animation-timing-function: linear;
            -moz-animation-duration: 1.2s;
            -moz-animation-iteration-count: infinite;
            -moz-animation-delay: -0.3s;
            -ms-animation-name: scale;
            -ms-animation-timing-function: linear;
            -ms-animation-duration: 1.2s;
            -ms-animation-iteration-count: infinite;
            -ms-animation-delay: -0.3s;
            -o-animation-name: scale;
            -o-animation-timing-function: linear;
            -o-animation-duration: 1.2s;
            -o-animation-iteration-count: infinite;
            -o-animation-delay: -0.3s;
        }

@-webkit-keyframes scale {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
    }

    20%, 60% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes scale {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.2);
        transform: scaleY(0.2);
    }

    20%, 60% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}