Binary Star Loader

<div class="ldr-binary-star" role="status" aria-label="Loading">
  <span class="ldr-binary-star-body"><span></span></span>
  <span class="ldr-binary-star-body"><span></span></span>
</div>

.ldr-binary-star {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 1.1);
  height: var(--s);
}
.ldr-binary-star::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--s) * 0.9);
  height: calc(var(--s) * 0.26);
  margin: calc(var(--s) * -0.13) 0 0 calc(var(--s) * -0.45);
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  border-radius: 50%;
}
.ldr-binary-star-body {
  --r: 0.1;
  position: absolute;
  top: 50%;
  left: 50%;
  animation:
    ldr-binary-star-x 0.8s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate,
    ldr-binary-star-z 1.6s step-end infinite;
}
.ldr-binary-star-body > span {
  position: absolute;
  width: calc(var(--s) * 0.3);
  height: calc(var(--s) * 0.3);
  margin: calc(var(--s) * -0.15);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 calc(var(--s) / 5) color-mix(in srgb, var(--ldr-color, #3b82f6) 45%, transparent);
  animation: ldr-binary-star-y 0.8s cubic-bezier(0.37, 0, 0.63, 1) -0.4s infinite alternate;
}
/* The companion: a wider orbit, half a period out of phase. */
.ldr-binary-star-body + .ldr-binary-star-body {
  --r: 0.45;
  animation-delay: -0.8s;
}
.ldr-binary-star-body + .ldr-binary-star-body > span {
  width: calc(var(--s) / 7);
  height: calc(var(--s) / 7);
  margin: calc(var(--s) / -14);
  box-shadow: none;
  animation-delay: -1.2s;
}
@keyframes ldr-binary-star-x {
  from { transform: translateX(calc(var(--s) * var(--r) * -1)); }
  to   { transform: translateX(calc(var(--s) * var(--r))); }
}
@keyframes ldr-binary-star-y {
  from { transform: translateY(calc(var(--s) * var(--r) * -0.28)) scale(calc(1 - var(--r) * 0.5)); }
  to   { transform: translateY(calc(var(--s) * var(--r) * 0.28)) scale(calc(1 + var(--r) * 0.5)); }
}
@keyframes ldr-binary-star-z {
  0%, 100% { z-index: 2; }
  50%      { z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-binary-star, .ldr-binary-star *, .ldr-binary-star::before, .ldr-binary-star::after, .ldr-binary-star *::before, .ldr-binary-star *::after {
    animation-duration: 3s;
  }
}

Similar loaders