DNA Helix

<!-- DNA Helix Loader -->
<div class="nuda-dna-helix-loader" role="status" aria-label="Loading">
  <span class="nuda-dna-helix-loader__col"><i></i><i></i></span>
  <span class="nuda-dna-helix-loader__col" style="animation-delay:.12s"><i></i><i></i></span>
  <span class="nuda-dna-helix-loader__col" style="animation-delay:.24s"><i></i><i></i></span>
  <span class="nuda-dna-helix-loader__col" style="animation-delay:.36s"><i></i><i></i></span>
  <span class="nuda-dna-helix-loader__col" style="animation-delay:.48s"><i></i><i></i></span>
  <span class="nuda-dna-helix-loader__col" style="animation-delay:.6s"><i></i><i></i></span>
</div>

/* DNA Helix Loader
   Paired dots in columns rotating around a horizontal axis to suggest a helix.
   Customize: --dnal-color */

.nuda-dna-helix-loader {
  --dnal-color: #e4ff54;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 44px;
  padding: 8px;
}

.nuda-dna-helix-loader__col {
  position: relative;
  width: 6px;
  height: 32px;
  animation: nuda-dna-helix-loader 1.6s ease-in-out infinite;
  will-change: transform;
}

.nuda-dna-helix-loader__col i {
  position: absolute;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.nuda-dna-helix-loader__col i:nth-child(1) { top: 0; background: var(--dnal-color); }
.nuda-dna-helix-loader__col i:nth-child(2) { bottom: 0; background: rgba(228, 255, 84, 0.4); }

@keyframes nuda-dna-helix-loader {
  0%, 100% { transform: rotateX(0deg); }
  50%      { transform: rotateX(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-dna-helix-loader__col { animation: none; }
}