.loader {
    height: 20px;
    width: 150px;
    margin: 0 auto;
}

.loader-center.loader {
    display: inline-block;
    top: 50%;
    right: 50%;
    -webkit-transform: translateX(50%) translateY(-50%);
    -ms-transform: translateX(50%) translateY(-50%);
    transform: translateX(50%) translateY(-50%);
    position: absolute;
}

.loader-lg {
    height: 32px;
    width: 240px;
}

.loader-segment{
    float: left;
    height:100%;
    width: 8%;
    margin: 0 1%;
    background-color: black;
    -webkit-animation: loader 1.4s infinite linear;
    animation: loader 1.4s infinite linear;
    opacity: 0.3;
}

@keyframes loader {
    0%, 100% {
        opacity: 0.3;
    } 10% {
        opacity: 0.8;
    }
}

.loader-segment:nth-child(2){
    animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}

.loader-segment:nth-child(3){
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

.loader-segment:nth-child(4){
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}

.loader-segment:nth-child(5){
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}

.loader-segment:nth-child(6){
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

.loader-segment:nth-child(7){
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}

.loader-segment:nth-child(8){
    animation-delay: 0.7s;
    -webkit-animation-delay: 0.7s;
}

.loader-segment:nth-child(9){
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

.loader-segment:nth-child(10){
    animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
}

.loader.inactive {
	display: none !important;
}