15 Pure CSS Loading Animations
Clock Sweep
Two pseudo-element hands rotate at different speeds inside a circular face — a literal animated clock using only CSS.
Clock Sweep the 10th of 15 designs in the 15 Pure CSS Loading Animations collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="clock"></div>
.clock {
width: 52px;
height: 52px;
border-radius: 50%;
border: 3px solid rgba(124, 108, 255, 0.25);
position: relative;
}
.clock::before,
.clock::after {
content: "";
position: absolute;
border-radius: 2px;
}
.clock::before {
width: 2px;
height: 22px;
background: #7c6cff;
top: 4px;
left: 50%;
margin-left: -1px;
transform-origin: bottom center;
animation: chour 6s linear infinite;
}
.clock::after {
width: 2px;
height: 16px;
background: #ff6c8a;
top: 10px;
left: 50%;
margin-left: -1px;
transform-origin: bottom center;
animation: cmin 1s linear infinite;
}
@keyframes chour {
to {
transform: rotate(360deg);
}
}
@keyframes cmin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.clock,
.clock * {
animation: none !important;
}
}