Ellipses Loader

2019-12-01 13:30

I am often creating loading animations that just utilize an ellipses. The main requirement is that the ellipses retains its natural width, so that the element can be used inline, or centered, without causing layout shifts.

.ellipses-loader {
  animation: ellipses-loader 2s linear infinite;
}

@keyframes ellipses-loader {
  0% { clip-path: inset(0 100% 0 0) }
  24.9% { clip-path: inset(0 100% 0 0) }
  25% { clip-path: inset(0 66% 0 0) }
  49.9% { clip-path: inset(0 66% 0 0) }
  50% { clip-path: inset(0 33% 0 0) }
  74.9% { clip-path: inset(0 33% 0 0) }
  75% { clip-path: inset(0 0 0 0) }
  100% { clip-path: inset(0 0 0 0) }
}
<span class="ellipses-loader"></span>