15 Pure CSS Loading Animations 14 / 15
Hourglass Flip
A pure CSS triangle-based hourglass that flips 180° and pauses, then repeats — built from two border triangles.
The code
<div class="hourglass"></div>
<div class="hourglass"></div>.hourglass {
width: 40px;
height: 40px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #7c6cff;
border-bottom: 20px solid #ff6c8a;
border-radius: 4px;
animation: hflip 1.8s ease-in-out infinite;
}
@keyframes hflip {
0%,
45% {
transform: rotate(0deg);
}
55%,
100% {
transform: rotate(180deg);
}
}
@media (prefers-reduced-motion: reduce) {
.hourglass,
.hourglass * {
animation: none !important;
}
}
.hourglass {
width: 40px;
height: 40px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #7c6cff;
border-bottom: 20px solid #ff6c8a;
border-radius: 4px;
animation: hflip 1.8s ease-in-out infinite;
}
@keyframes hflip {
0%,
45% {
transform: rotate(0deg);
}
55%,
100% {
transform: rotate(180deg);
}
}
@media (prefers-reduced-motion: reduce) {
.hourglass,
.hourglass * {
animation: none !important;
}
}