Animation Onload.

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href=".css">
<script src=".js"></script>
<style>

.wheel { width:200px;height:200px;border:5px solid;border-radius:50%; }
.sp1 {  width:200px;border:2.5px solid;display:inline-block;
        margin-top:95px;  }
.sp2 {  width:200px;border:2.5px solid;display:inline-block;
        transform:rotate(90deg)translate(-15px,5px);  }

</style>
</head>
<body>


<div id='wheel' class='wheel'>
<span class='sp1'></span>
<span class='sp2'></span>
</div>

<h1 id='h1'>Starting in: 0</h1>

<script>
i=5;
onload=()=>{
x=setInterval(function(){
h1.innerHTML='Starting in: '+i;
i--;
if(i==-1){clearInterval(x);
i=10;
}
},1000);

setTimeout(()=>{
a=setInterval(function(){
h1.innerHTML='Finishing in: '+i;
i--;
if(i==-1){clearInterval(a);
}
},1000);
},5000);

setTimeout(()=>{
z=setInterval(()=>{
wheel.style.transform+='rotate(2deg)';
setTimeout(()=>{
clearInterval(z);
},10000);
},50);
},6000);
}

</script>
</body>
</html>