Ellipsographic Throbber

<div class="spiro">
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> <!-- The Dots -->
</div>

.spiro {
  display: inline-block;
  position: relative;
  width: 88px;
  height: 88px;
}

.spiro div {
  animation: spiropacity 1s linear infinite alternate;
  transform-origin: 44px 44px;
  opacity: 0;
}

.spiro div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(128, 128, 128, 0.5);
  margin: -4px;
  top: 4px;
  left: 44px;
  animation: spiro 2s ease-in-out infinite alternate;
}

/* Rotation and animation delays for the circles */
.spiro div:nth-child(2) { transform: rotate(22.5deg); animation-delay: 0.25s; }
.spiro div:nth-child(2)::after { animation-delay: 0.25s; }
.spiro div:nth-child(3) { transform: rotate(45deg); animation-delay: 0.5s; }
.spiro div:nth-child(3)::after { animation-delay: 0.5s; }
.spiro div:nth-child(4) { transform: rotate(67.5deg); animation-delay: 0.75s; }
.spiro div:nth-child(4)::after { animation-delay: 0.75s; }
.spiro div:nth-child(5) { transform: rotate(90deg); animation-delay: 1s; }
.spiro div:nth-child(5)::after { animation-delay: 1s; }
.spiro div:nth-child(6) { transform: rotate(112.5deg); animation-delay: 1.25s; }
.spiro div:nth-child(6)::after { animation-delay: 1.25s; }
.spiro div:nth-child(7) { transform: rotate(135deg); animation-delay: 1.5s; }
.spiro div:nth-child(7)::after { animation-delay: 1.5s; }
.spiro div:nth-child(8) { transform: rotate(157.5deg); animation-delay: 1.75s; }
.spiro div:nth-child(8)::after { animation-delay: 1.75s; }

@keyframes spiro {
  from { top: 4px; }
  to { top: 84px; }
}
@keyframes spiropacity {
  from { opacity: 0.1; }
  to { opacity: 1; }
}