Dotted Progress

<!-- Dotted Progress (4 of 8 filled) -->
<div class="nuda-dotted-progress" role="progressbar"
     aria-valuenow="4" aria-valuemin="0" aria-valuemax="8"
     aria-label="4 of 8 complete">
  <span class="is-filled"></span>
  <span class="is-filled"></span>
  <span class="is-filled"></span>
  <span class="is-filled"></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

/* Dotted Progress
   Dots fill in sequence with a small pop (transform: scale).
   Add the .is-filled class to completed dots.
   Customize: --dottedprog-color, --dottedprog-track */

.nuda-dotted-progress {
  --dottedprog-color: #e4ff54;
  --dottedprog-track: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  gap: 7px;
}

.nuda-dotted-progress span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dottedprog-track);
}

.nuda-dotted-progress span.is-filled {
  background: var(--dottedprog-color);
  animation: nuda-dotted-progress 0.4s ease-out both;
  will-change: transform;
}

.nuda-dotted-progress span.is-filled:nth-child(2) { animation-delay: 0.1s; }
.nuda-dotted-progress span.is-filled:nth-child(3) { animation-delay: 0.2s; }
.nuda-dotted-progress span.is-filled:nth-child(4) { animation-delay: 0.3s; }

@keyframes nuda-dotted-progress {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-dotted-progress span.is-filled { animation: none; transform: scale(1); }
}