CSS LOADING ANIMATION USING HTML & CSS| PURE CSS CLOCK LOADER | 5

Step 1) Add HTML:

​<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3> css clock loader tutorial</h3>
<div class="clock">
<span class="twelve">12</span>
<span class="six">6</span>
<span class="nine">9</span>
<span class="three">3</span>
<div class="hour">
</div>
<div class="sec">
</div>
</div>
</body>
</html>

Add CSS CODE IN <style> tag

 

/*code by gs code */

<style>
*{
background: #e94b3cff;
}
h3{
text-align: center;
text-transform: uppercase;
font-size: 40px;
font-family: monospace;
}
.clock{
border: 20px solid;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 150px;
height: 150px;
border-radius: 50%;

}
.twelve{
position: absolute;
top:-18px;
left: 67px;
}
.nine,.six,.three,.six,.twelve{
color: #fff;
background: none;
}
.nine{
position: relative;
top:60px;
left:-25px;
}
.three{
position: relative;
top:60px;
left: 132px;
}
.six{
position: relative;
top:150px;
left:70px;
}
.hour{
border: 3px solid;
position: absolute;
top:50%;
left: 50%;
height: 60px;
border-radius: 20%;
animation: hour 6s linear infinite;
}
.sec{
border: 3px solid;
position: absolute;
top:50%;
left: 50%;
height: 40px;
border-radius: 20%;
animation: clock 15s linear infinite;
}

@keyframes hour {
0%{
transform: rotateZ(0deg);
transform-origin: top;
}
100%{
transform: rotateZ(360deg);
transform-origin: top;
}
}
@keyframes clock {
0%{
transform: rotateZ(0deg);
transform-origin: top;
}
100%{
transform: rotateZ(360deg);
transform-origin: top;
}
}

</style>

.