#loading-bar{
    position:relative;
    width:245px;
    height:20px;
    margin:0 auto;
}

#loading-bar>.square{
    position:absolute;
    top:0;
    background-color:rgba(204,204,204,1.0);
    width:20px;
    height:20px;
    animation-name: spinning_square_bar;
    animation-duration:1.8s;
    animation-iteration-count:infinite;
    animation-direction:normal;
    transform:scale(.25);
}

#loading-bar-square01{
    left:0;
    animation-delay:0.45s;
}

#loading-bar-square02{
    left:25px;
    animation-delay:0.55s;
}

#loading-bar-square03{
    left:50px;
    animation-delay:0.65s;
}

#loading-bar-square04{
    left:75px;
    animation-delay:0.75s;
}

#loading-bar-square05{
    left:100px;
    animation-delay:0.85s;
}

#loading-bar-square06{
    left:125px;
    animation-delay:0.95s;
}

#loading-bar-square07{
    left:150px;
    animation-delay:1.05s;
}

#loading-bar-square08{
    left:175px;
    animation-delay:1.15s;
}
#loading-bar-square09{
    left:200px;
    animation-delay:1.25s;
}
#loading-bar-square10{
    left:225px;
    animation-delay:1.35s;
}

@keyframes spinning_square_bar{
    0%{
        transform:scale(0.75);
        background-color:rgba(167,0,0,0.5);
    }
    20%{
        background-color:rgba(167,0,0,0.5);
    }
    25%{
        background-color:rgba(0,44,145,0.5);
    }
    45%{
        background-color:rgba(0,44,145,0.5);
    }
    50%{
        background-color:rgba(0,133,0,0.5);
    }
    70%{
        background-color:rgba(0,133,0,0.5);
    }
    75%{
        background-color:rgba(204,204,204,1.0);
    }
    100%{
        transform:scale(.25) rotate(180deg);
        background-color:rgba(204,204,204,1.0);
    }
}