Vertical Timeline Steps Nav

<!--
  Author: @emma-lake
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<nav class="timeline-nav">
  <div class="timeline-nav__step is-done">
    <span class="timeline-nav__dot"></span>
    <span class="timeline-nav__text">Account created</span>
  </div>
  <div class="timeline-nav__step is-current">
    <span class="timeline-nav__dot"></span>
    <span class="timeline-nav__text">Verify email</span>
  </div>
  <div class="timeline-nav__step">
    <span class="timeline-nav__dot"></span>
    <span class="timeline-nav__text">Setup workspace</span>
  </div>
</nav>

/*
 * Author: @emma-lake
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.timeline-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-left: 6px;
  font-family: system-ui, sans-serif;
}
.timeline-nav::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, #22c55e, #38bdf8, transparent, transparent, #38bdf8, #22c55e);
  background-size: 100% 300%;
  animation: timeline-line-flow 3.4s linear infinite;
}
@keyframes timeline-line-flow {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}
.timeline-nav__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.timeline-nav__dot {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #17171d;
  border: 2px solid #3a3a44;
  flex-shrink: 0;
}
.timeline-nav__text {
  font-size: 13px;
  color: #6b6b76;
}
.timeline-nav__step.is-done .timeline-nav__dot {
  background: #22c55e;
  border-color: #22c55e;
  box-shadow: 0 0 8px 1px rgba(34, 197, 94, 0.5);
}
.timeline-nav__step.is-done .timeline-nav__text {
  color: #a1a1aa;
}
.timeline-nav__step.is-current .timeline-nav__dot {
  border-color: #38bdf8;
  animation: timeline-pulse 1.6s ease-in-out infinite;
}
.timeline-nav__step.is-current .timeline-nav__text {
  color: #f4f4f5;
  font-weight: 600;
}
@keyframes timeline-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(56, 189, 248, 0); }
}