.loading-circles{
    margin: auto;
    position:relative;
    width:64px;
    height:64px;
    -webkit-transform:scale(0.6);
    transform:scale(0.6);
}
 
.loading-circle{
    position:absolute;
    background-color:#FFFFFF;
    height:12px;
    width:12px;
    -webkit-border-radius:6px;
    -webkit-animation-name:circle-fader;
    -webkit-animation-duration:0.72s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    border-radius:6px;
    animation-name:circle-fader;
    animation-duration:0.72s;
    animation-iteration-count:infinite;
    animation-direction:linear;
}
 
.loading-circle:nth-of-type(1) {
    left:0;
    top:26px;
    -webkit-animation-delay:0.27s;
    animation-delay:0.27s;
}
 
.loading-circle:nth-of-type(2) {
    left:8px;
    top:8px;
    -webkit-animation-delay:0.36s;
    animation-delay:0.36s;
}
 
.loading-circle:nth-of-type(3) {
    left:26px;
    top:0;
    -webkit-animation-delay:0.45s;
    animation-delay:0.45s;
}
 
.loading-circle:nth-of-type(4) {
    right:8px;
    top:8px;
    -webkit-animation-delay:0.54s;
    animation-delay:0.54s;
}
 
.loading-circle:nth-of-type(5) {
    right:0;
    top:26px;
    -webkit-animation-delay:0.63s;
    animation-delay:0.63s;
}
 
.loading-circle:nth-of-type(6) {
    right:8px;
    bottom:8px;
    -webkit-animation-delay:0.72s;
    animation-delay:0.72s;
}
 
.loading-circle:nth-of-type(7) {
    left:26px;
    bottom:0;
    -webkit-animation-delay:0.81s;
    animation-delay:0.81s;
}
 
.loading-circle:nth-of-type(8) {
    left:8px;
    bottom:8px;
    -webkit-animation-delay:0.9s;
    animation-delay:0.9s;
}
 
@-webkit-keyframes circle-fader{
    0%{background-color:#000000}
    100%{background-color:#FFFFFF}
}
 
@keyframes circle-fader{
    0%{background-color:#000000}
    100%{background-color:#FFFFFF}
}