a simple loading spinner in javascript / 자바스크립트로 로딩스피너 만들기

<style>
ul, li {list-style:none; margin:0; padding:0; display:block;}
#loadingWrap {position:relative; width:90px; height:90px; /*border:1px solid pink;*/ margin:20% auto;}
.circle {width:20px; height:20px; border-radius:50%; background-color:pink;}
.c1 {position:absolute; top:0; left:50%; margin-left:-10px;}
.c2 {position:absolute; top:25%; right:25%; margin-top:-10px; margin-right:-10px;}
.c3 {position:absolute; top:50%; right:0; margin-top:-10px;}
.c4 {position:absolute; bottom:25%; right:25%; margin-bottom:-10px; margin-right:-10px;}
.c5 {position:absolute; bottom:0; left:50%; margin-left:-10px;}
.c6 {position:absolute; bottom:25%; left:25%; margin-bottom:-10px; margin-left:-10px;}
.c7 {position:absolute; top:50%; left:0; margin-top:-10px;}
.c8 {position:absolute; top:25%; left:25%; margin-top:-10px; margin-left:-10px;}
</style>

<ul id="loadingWrap">
<li class="circle c1"></li>
<li class="circle c2"></li>
<li class="circle c3"></li>
<li class="circle c4"></li>
<li class="circle c5"></li>
<li class="circle c6"></li>
<li class="circle c7"></li>
<li class="circle c8"></li>
</ul>

<script>
window.onload= spin;
var wrap= document.getElementById("loadingWrap");
var i=0;
function loading(){
if(i > 0){
wrap.children[i-1].style.backgroundColor = "pink";
}
if(i >= wrap.children.length){
i=0;
}
console.log(i);
wrap.children[i].style.backgroundColor = "skyblue";
i++;
}
function spin(){
setInterval(loading,500);
}
</script>