.load-bar {
    position: fixed;
    bottom: 0;
    height: 5px;
    width: 100%;
    z-index: 3000;
}

.load-bar-container {
    float: left;
    width: 50%;
    height: 100%;
    overflow: hidden
}

.load-bar .load-bar-container:last-child {
    float: right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -webkit-transform-origin: top right
}

.load-bar-base {
    float: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: #159756
}

.color {
    width: 100%;
    height: 100%;
    float: left;
    position: absolute
}

.base1 .red {
    background: #da4733;
    -webkit-animation: move_left_red 4s infinite linear;
    -moz-animation: move_left_red 4s infinite linear;
    -ms-animation: move_left_red 4s infinite linear;
    animation: move_left_red 4s infinite linear
}

.base1 .blue {
    background: #3b78e7;
    -webkit-animation: move_left_blue 4s infinite linear;
    -moz-animation: move_left_blue 4s infinite linear;
    -ms-animation: move_left_blue 4s infinite linear;
    animation: move_left_blue 4s infinite linear
}

.base1 .yellow {
    background: #fdba2c;
    -webkit-animation: move_left_yellow 4s infinite linear;
    -moz-animation: move_left_yellow 4s infinite linear;
    -ms-animation: move_left_yellow 4s infinite linear;
    animation: move_left_yellow 4s infinite linear
}

.base1 .green {
    background: #159756;
    -webkit-animation: move_left_green 4s infinite linear;
    -moz-animation: move_left_green 4s infinite linear;
    -ms-animation: move_left_green 4s infinite linear;
    animation: move_left_green 4s infinite linear
}

@-webkit-keyframes move_left_red {
    0% {
        -webkit-transform: translateX(100%)
    }

    25% {
        -webkit-transform: translateX(0%)
    }

    50% {
        -webkit-transform: translateX(0%)
    }

    75% {
        -webkit-transform: translateX(0%)
    }

    100% {
        -webkit-transform: translateX(0%)
    }
}

@-moz-keyframes move_left_red {
    0% {
        -moz-transform: translateX(100%)
    }

    25% {
        -moz-transform: translateX(0%)
    }

    50% {
        -moz-transform: translateX(0%)
    }

    75% {
        -moz-transform: translateX(0%)
    }

    100% {
        -moz-transform: translateX(0%)
    }
}

@-ms-keyframes move_left_red {
    0% {
        -ms-transform: translateX(100%)
    }

    25% {
        -ms-transform: translateX(0%)
    }

    50% {
        -ms-transform: translateX(0%)
    }

    75% {
        -ms-transform: translateX(0%)
    }

    100% {
        -ms-transform: translateX(0%)
    }
}

@keyframes move_left_red {
    0% {
        transform: translateX(100%)
    }

    25% {
        transform: translateX(0%)
    }

    50% {
        transform: translateX(0%)
    }

    75% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(0%)
    }
}

@-webkit-keyframes move_left_blue {
    0% {
        -webkit-transform: translateX(100%)
    }

    25% {
        -webkit-transform: translateX(100%)
    }

    50% {
        -webkit-transform: translateX(0%)
    }

    75% {
        -webkit-transform: translateX(0%)
    }

    100% {
        -webkit-transform: translateX(0%)
    }
}

@-moz-keyframes move_left_blue {
    0% {
        -moz-transform: translateX(100%)
    }

    25% {
        -moz-transform: translateX(100%)
    }

    50% {
        -moz-transform: translateX(0%)
    }

    75% {
        -moz-transform: translateX(0%)
    }

    100% {
        -moz-transform: translateX(0%)
    }
}

@-ms-keyframes move_left_blue {
    0% {
        -ms-transform: translateX(100%)
    }

    25% {
        -ms-transform: translateX(100%)
    }

    50% {
        -ms-transform: translateX(0%)
    }

    75% {
        -ms-transform: translateX(0%)
    }

    100% {
        -ms-transform: translateX(0%)
    }
}

@keyframes move_left_blue {
    0% {
        transform: translateX(100%)
    }

    25% {
        transform: translateX(100%)
    }

    50% {
        transform: translateX(0%)
    }

    75% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(0%)
    }
}

@-webkit-keyframes move_left_yellow {
    0% {
        -webkit-transform: translateX(100%)
    }

    25% {
        -webkit-transform: translateX(100%)
    }

    50% {
        -webkit-transform: translateX(100%)
    }

    75% {
        -webkit-transform: translateX(0%)
    }

    100% {
        -webkit-transform: translateX(0%)
    }
}

@-moz-keyframes move_left_yellow {
    0% {
        -moz-transform: translateX(100%)
    }

    25% {
        -moz-transform: translateX(100%)
    }

    50% {
        -moz-transform: translateX(100%)
    }

    75% {
        -moz-transform: translateX(0%)
    }

    100% {
        -moz-transform: translateX(0%)
    }
}

@-ms-keyframes move_left_yellow {
    0% {
        -ms-transform: translateX(100%)
    }

    25% {
        -ms-transform: translateX(100%)
    }

    50% {
        -ms-transform: translateX(100%)
    }

    75% {
        -ms-transform: translateX(0%)
    }

    100% {
        -ms-transform: translateX(0%)
    }
}

@keyframes move_left_yellow {
    0% {
        transform: translateX(100%)
    }

    25% {
        transform: translateX(100%)
    }

    50% {
        transform: translateX(100%)
    }

    75% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(0%)
    }
}

@-webkit-keyframes move_left_green {
    0% {
        -webkit-transform: translateX(100%)
    }

    25% {
        -webkit-transform: translateX(100%)
    }

    50% {
        -webkit-transform: translateX(100%)
    }

    75% {
        -webkit-transform: translateX(100%)
    }

    100% {
        -webkit-transform: translateX(0%)
    }
}

@-moz-keyframes move_left_green {
    0% {
        -moz-transform: translateX(100%)
    }

    25% {
        -moz-transform: translateX(100%)
    }

    50% {
        -moz-transform: translateX(100%)
    }

    75% {
        -moz-transform: translateX(100%)
    }

    100% {
        -moz-transform: translateX(0%)
    }
}

@-ms-keyframes move_left_green {
    0% {
        -ms-transform: translateX(100%)
    }

    25% {
        -ms-transform: translateX(100%)
    }

    50% {
        -ms-transform: translateX(100%)
    }

    75% {
        -ms-transform: translateX(100%)
    }

    100% {
        -ms-transform: translateX(0%)
    }
}

@keyframes move_left_green {
    0% {
        transform: translateX(100%)
    }

    25% {
        transform: translateX(100%)
    }

    50% {
        transform: translateX(100%)
    }

    75% {
        transform: translateX(100%)
    }

    100% {
        transform: translateX(0%)
    }
}

.base2 .red {
    background: #da4733;
    -webkit-animation: move_right_red 4s infinite linear;
    -moz-animation: move_right_red 4s infinite linear;
    -ms-animation: move_right_red 4s infinite linear;
    animation: move_right_red 4s infinite linear
}

.base2 .blue {
    background: #3b78e7;
    -webkit-animation: move_right_blue 4s infinite linear;
    -moz-animation: move_right_blue 4s infinite linear;
    -ms-animation: move_right_blue 4s infinite linear;
    animation: move_right_blue 4s infinite linear
}

.base2 .yellow {
    background: #fdba2c;
    -webkit-animation: move_right_yellow 4s infinite linear;
    -moz-animation: move_right_yellow 4s infinite linear;
    -ms-animation: move_right_yellow 4s infinite linear;
    animation: move_right_yellow 4s infinite linear
}

.base2 .green {
    background: #159756;
    -webkit-animation: move_right_green 4s infinite linear;
    -moz-animation: move_right_green 4s infinite linear;
    -ms-animation: move_right_green 4s infinite linear;
    animation: move_right_green 4s infinite linear
}

@-webkit-keyframes move_right_red {
    0% {
        -webkit-transform: translateX(-100%)
    }

    25% {
        -webkit-transform: translateX(0%)
    }

    50% {
        -webkit-transform: translateX(0%)
    }

    75% {
        -webkit-transform: translateX(0%)
    }

    100% {
        -webkit-transform: translateX(0%)
    }
}

@-moz-keyframes move_right_red {
    0% {
        -moz-transform: translateX(-100%)
    }

    25% {
        -moz-transform: translateX(0%)
    }

    50% {
        -moz-transform: translateX(0%)
    }

    75% {
        -moz-transform: translateX(0%)
    }

    100% {
        -moz-transform: translateX(0%)
    }
}

@-ms-keyframes move_right_red {
    0% {
        -ms-transform: translateX(-100%)
    }

    25% {
        -ms-transform: translateX(0%)
    }

    50% {
        -ms-transform: translateX(0%)
    }

    75% {
        -ms-transform: translateX(0%)
    }

    100% {
        -ms-transform: translateX(0%)
    }
}

@keyframes move_right_red {
    0% {
        transform: translateX(-100%)
    }

    25% {
        transform: translateX(0%)
    }

    50% {
        transform: translateX(0%)
    }

    75% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(0%)
    }
}

@-webkit-keyframes move_right_blue {
    0% {
        -webkit-transform: translateX(-100%)
    }

    25% {
        -webkit-transform: translateX(-100%)
    }

    50% {
        -webkit-transform: translateX(0%)
    }

    75% {
        -webkit-transform: translateX(0%)
    }

    100% {
        -webkit-transform: translateX(0%)
    }
}

@-moz-keyframes move_right_blue {
    0% {
        -moz-transform: translateX(-100%)
    }

    25% {
        -moz-transform: translateX(-100%)
    }

    50% {
        -moz-transform: translateX(0%)
    }

    75% {
        -moz-transform: translateX(0%)
    }

    100% {
        -moz-transform: translateX(0%)
    }
}

@-ms-keyframes move_right_blue {
    0% {
        -ms-transform: translateX(-100%)
    }

    25% {
        -ms-transform: translateX(-100%)
    }

    50% {
        -ms-transform: translateX(0%)
    }

    75% {
        -ms-transform: translateX(0%)
    }

    100% {
        -ms-transform: translateX(0%)
    }
}

@keyframes move_right_blue {
    0% {
        transform: translateX(-100%)
    }

    25% {
        transform: translateX(-100%)
    }

    50% {
        transform: translateX(0%)
    }

    75% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(0%)
    }
}

@-webkit-keyframes move_right_yellow {
    0% {
        -webkit-transform: translateX(-100%)
    }

    25% {
        -webkit-transform: translateX(-100%)
    }

    50% {
        -webkit-transform: translateX(-100%)
    }

    75% {
        -webkit-transform: translateX(0%)
    }

    100% {
        -webkit-transform: translateX(0%)
    }
}

@-moz-keyframes move_right_yellow {
    0% {
        -moz-transform: translateX(-100%)
    }

    25% {
        -moz-transform: translateX(-100%)
    }

    50% {
        -moz-transform: translateX(-100%)
    }

    75% {
        -moz-transform: translateX(0%)
    }

    100% {
        -moz-transform: translateX(0%)
    }
}

@-ms-keyframes move_right_yellow {
    0% {
        -ms-transform: translateX(-100%)
    }

    25% {
        -ms-transform: translateX(-100%)
    }

    50% {
        -ms-transform: translateX(-100%)
    }

    75% {
        -ms-transform: translateX(0%)
    }

    100% {
        -ms-transform: translateX(0%)
    }
}

@keyframes move_right_yellow {
    0% {
        transform: translateX(-100%)
    }

    25% {
        transform: translateX(-100%)
    }

    50% {
        transform: translateX(-100%)
    }

    75% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(0%)
    }
}

@-webkit-keyframes move_right_green {
    0% {
        -webkit-transform: translateX(-100%)
    }

    25% {
        -webkit-transform: translateX(-100%)
    }

    50% {
        -webkit-transform: translateX(-100%)
    }

    75% {
        -webkit-transform: translateX(-100%)
    }

    100% {
        -webkit-transform: translateX(0%)
    }
}

@-moz-keyframes move_right_green {
    0% {
        -moz-transform: translateX(-100%)
    }

    25% {
        -moz-transform: translateX(-100%)
    }

    50% {
        -moz-transform: translateX(-100%)
    }

    75% {
        -moz-transform: translateX(-100%)
    }

    100% {
        -moz-transform: translateX(0%)
    }
}

@-ms-keyframes move_right_green {
    0% {
        -ms-transform: translateX(-100%)
    }

    25% {
        -ms-transform: translateX(-100%)
    }

    50% {
        -ms-transform: translateX(-100%)
    }

    75% {
        -ms-transform: translateX(-100%)
    }

    100% {
        -ms-transform: translateX(0%)
    }
}

@keyframes move_right_green {
    0% {
        transform: translateX(-100%)
    }

    25% {
        transform: translateX(-100%)
    }

    50% {
        transform: translateX(-100%)
    }

    75% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(0%)
    }
}