15 Pure CSS Loading Animations

Hourglass Flip

A pure CSS triangle-based hourglass that flips 180° and pauses, then repeats — built from two border triangles.

Hourglass Flip the 14th 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="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;
  }
}