Css loading spinner

HTML

<div class="loadingSpinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

CSS

.loadingSpinner{position:relative;width:32px;height:32px;
}

.loadingSpinner div{position:absolute;
background-color:transparent;
height:6px;
width:6px;
-webkit-border-radius:3px;
-webkit-animation-name:loadingSpinner;
-webkit-animation-duration:0.8s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
border-radius:3px;
animation-name:loadingSpinner;
animation-duration:0.8s;
animation-iteration-count:infinite;
animation-direction:linear;
}

.loadingSpinner div:nth-child(1){left:0;
top:13px;
-webkit-animation-delay:0.3s;
animation-delay:0.3s;
}

.loadingSpinner div:nth-child(2){left:4px;
top:4px;
-webkit-animation-delay:0.4s;
animation-delay:0.4s;
}

.loadingSpinner div:nth-child(3){left:13px;
top:0;
-webkit-animation-delay:0.5s;
animation-delay:0.5s;
}

.loadingSpinner div:nth-child(4){right:4px;
top:4px;
-webkit-animation-delay:0.6s;
animation-delay:0.6s;
}

.loadingSpinner div:nth-child(5){right:0;
top:13px;
-webkit-animation-delay:0.7s;
animation-delay:0.7s;
}

.loadingSpinner div:nth-child(6){right:4px;
bottom:4px;
-webkit-animation-delay:0.8s;
animation-delay:0.8s;
}

.loadingSpinner div:nth-child(7){left:13px;
bottom:0;
-webkit-animation-delay:0.9s;
animation-delay:0.9s;
}

.loadingSpinner div:nth-child(8){left:4px;
bottom:4px;
-webkit-animation-delay:1s;
animation-delay:1s;
}

@-webkit-keyframes loadingSpinner{
0%{
background-color:red}

100%{
background-color:transparent}

}

@keyframes loadingSpinner{
0%{
background-color:red}

100%{
background-color:transparent}

}