Progress Glow Breadcrumb

<nav aria-label="Breadcrumb" class="nuda-bc2-progress">
  <ol class="nuda-bc2-progress__list">
    <li class="nuda-bc2-progress__item nuda-bc2-progress__item--done"><span class="nuda-bc2-progress__dot" aria-hidden="true"></span><a class="nuda-bc2-progress__link" href="#">Cart</a></li>
    <li class="nuda-bc2-progress__sep" aria-hidden="true"></li>
    <li class="nuda-bc2-progress__item nuda-bc2-progress__item--done"><span class="nuda-bc2-progress__dot" aria-hidden="true"></span><a class="nuda-bc2-progress__link" href="#">Address</a></li>
    <li class="nuda-bc2-progress__sep" aria-hidden="true"></li>
    <li class="nuda-bc2-progress__item nuda-bc2-progress__item--cur"><span class="nuda-bc2-progress__dot" aria-hidden="true"></span><span class="nuda-bc2-progress__link" aria-current="page">Payment</span></li>
    <li class="nuda-bc2-progress__sep" aria-hidden="true"></li>
    <li class="nuda-bc2-progress__item"><span class="nuda-bc2-progress__dot" aria-hidden="true"></span><span class="nuda-bc2-progress__link">Confirm</span></li>
  </ol>
</nav>

.nuda-bc2-progress {
  width: 280px;
}

.nuda-bc2-progress__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .74rem;
}

.nuda-bc2-progress__item {
  display: flex;
  align-items: center;
  gap: .3rem;
  color: #666;
}

.nuda-bc2-progress__sep {
  width: 16px;
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 0 .25rem;
}

.nuda-bc2-progress__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #333;
  flex: none;
}

.nuda-bc2-progress__link {
  color: #666;
  text-decoration: none;
}

.nuda-bc2-progress__item--done {
  color: #b6d94a;
}

.nuda-bc2-progress__item--done .nuda-bc2-progress__dot {
  background: #e4ff54;
}

.nuda-bc2-progress__item--done .nuda-bc2-progress__link {
  color: #b6d94a;
}

.nuda-bc2-progress__item--cur {
  color: #fafafa;
}

.nuda-bc2-progress__item--cur .nuda-bc2-progress__link {
  color: #fafafa;
  font-weight: 700;
}

.nuda-bc2-progress__item--cur .nuda-bc2-progress__dot {
  background: #e4ff54;
  animation: _nuda-bc2progressglow 1.6s ease-in-out infinite;
}

@keyframes _nuda-bc2progressglow {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(228,255,84,.55);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(228,255,84,0);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-bc2-progress__item--cur .nuda-bc2-progress__dot {
    animation: none !important;
    box-shadow: 0 0 0 3px rgba(228,255,84,.35);
  }
}