.planet-loader {
  --size: 32px;
  --planet: 10px;
  --space: 5px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 20%, transparent 80%);
  position: relative;
}

.planet-loader:before,
.planet-loader:after {
  position: absolute;
  z-index: 1;
  content: "";
  width: var(--planet);
  height: var(--planet);
  border-radius: 50%;

  top: calc((var(--planet) + var(--space)) * -1);
  right: calc((var(--size) - var(--planet)) / 2);
  transform-origin: calc(var(--planet) / 2) calc(var(--size) / 2 + var(--planet) + var(--space));

  background: currentColor;
  animation-name: rotate;
  animation-timing-function: cubic-bezier(0.65, 0, 0.58, 1);
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.planet-loader:after {
  animation-delay: 1s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}