<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;
  }
}