CSS clock style loader​

  • by

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 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>
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>
[everest_form id=”287″]