Atom Orbit

<!-- Atom Orbit Loader -->
<div class="nuda-atom-orbit" role="status" aria-label="Loading">
  <div class="nuda-atom-orbit__nucleus"></div>
  <div class="nuda-atom-orbit__ring nuda-atom-orbit__ring--a"></div>
  <div class="nuda-atom-orbit__ring nuda-atom-orbit__ring--b"></div>
  <div class="nuda-atom-orbit__ring nuda-atom-orbit__ring--c"></div>
</div>

/* Atom Orbit Loader
   Electrons orbiting a nucleus on three tilted planes.
   Customize: --atom-size, --atom-nucleus-color, --atom-ring-color */

.nuda-atom-orbit {
  --atom-size: 48px;
  --atom-nucleus-color: #f472b6;
  --atom-ring-color: #818cf8;
  position: relative;
  width: var(--atom-size);
  height: var(--atom-size);
}

.nuda-atom-orbit__nucleus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--atom-nucleus-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.nuda-atom-orbit__ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid transparent;
  border-top-color: var(--atom-ring-color);
  border-radius: 50%;
  will-change: transform;
}

.nuda-atom-orbit__ring--a {
  animation: nuda-atom-orbit-a 1.5s linear infinite;
}

.nuda-atom-orbit__ring--b {
  animation: nuda-atom-orbit-b 1.5s linear infinite;
  animation-delay: 0.2s;
}

.nuda-atom-orbit__ring--c {
  animation: nuda-atom-orbit-c 1.5s linear infinite;
  animation-delay: 0.4s;
}

@keyframes nuda-atom-orbit-a {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes nuda-atom-orbit-b {
  0%   { transform: rotate(60deg); }
  100% { transform: rotate(420deg); }
}

@keyframes nuda-atom-orbit-c {
  0%   { transform: rotate(120deg); }
  100% { transform: rotate(480deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-atom-orbit__ring {
    animation: none;
    opacity: 0.5;
  }
  .nuda-atom-orbit__ring--a { transform: rotate(0deg); }
  .nuda-atom-orbit__ring--b { transform: rotate(60deg); }
  .nuda-atom-orbit__ring--c { transform: rotate(120deg); }
}