console
<body>
<ul class="list" id="list">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
<li class="in">4</li>
<li class="in">5</li>
</ul>
<script>
var oList = document.getElementById('list');
var oAdd = document.createElement('li');
oAdd.className = "in";
oAdd.style.cssText = 'background-color:red;border-radius:50%;background-position:center;margin-right:6px';;
oList.insertBefore(oAdd,null);
var num = 0;
var max = oList.children.length;
function incrementNumber(){
num++;
oList.insertBefore(oAdd,oList.getElementsByTagName('li')[num]);
if(num == max){
num = -1;
}
if(num == 0){
num = 1;
}
setTimeout(incrementNumber,1000);
}
setTimeout(incrementNumber,1000);
</script>
</body>
li{
list-style:none;
display:inline-block;
}
ul{
margin:0;
padding:0;
}
.list{
width:500px;
margin:50px auto 0;
}
.in{
height:20px;
line-height:20px;
width:20px;
background-color:rgba(20,50,80,0.6);
text-align:center;
color:white;
}