CSS clock style loader​

CSS clock style loader

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>
<span>12</span>
<span>6</span>
<span>9</span>
<span>3</span>
<div>
</div>
<div>
</div>
</div>
</body>
</html>
Step 2) Add CSS CODE IN style tag
<style>
body{
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;
}
.nine{
position: relative;
top:60px;
left: -25px;
}
.nine,.six,.three,.six,.twelve{
color: #fff;
background: none;
}
.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 clock {
0% {
transform: rotateZ(0deg);
transform-origin: top;
}
100% {
transform: rotateZ(360deg);
transform-origin: top;
}
}
@keyframes hour {
0% {
transform: rotateZ(0deg);
transform-origin: top;
}
100% {
transform: rotateZ(360deg);
transform-origin: top;
}
}
</style>