Numbered Steps Track
Horizontal stepper track — five circular nodes connected by a thin progress rail using grid columns and a `::before` pseudo-element. The onboarding / checkout step indicator.
The code
<ol class="gl-st">
<li class="gl-st-step gl-st-done">
<span class="gl-st-num">1</span><strong>Sign up</strong><em>step 1 / 5</em>
</li>
<li class="gl-st-step gl-st-done">
<span class="gl-st-num">2</span><strong>Verify email</strong><em>step 2 / 5</em>
</li>
<li class="gl-st-step gl-st-active">
<span class="gl-st-num">3</span><strong>Pick plan</strong><em>step 3 / 5</em>
</li>
<li class="gl-st-step">
<span class="gl-st-num">4</span><strong>Add billing</strong><em>step 4 / 5</em>
</li>
<li class="gl-st-step">
<span class="gl-st-num">5</span><strong>Done</strong><em>step 5 / 5</em>
</li>
</ol> <ol class="gl-st">
<li class="gl-st-step gl-st-done">
<span class="gl-st-num">1</span><strong>Sign up</strong><em>step 1 / 5</em>
</li>
<li class="gl-st-step gl-st-done">
<span class="gl-st-num">2</span><strong>Verify email</strong><em>step 2 / 5</em>
</li>
<li class="gl-st-step gl-st-active">
<span class="gl-st-num">3</span><strong>Pick plan</strong><em>step 3 / 5</em>
</li>
<li class="gl-st-step">
<span class="gl-st-num">4</span><strong>Add billing</strong><em>step 4 / 5</em>
</li>
<li class="gl-st-step">
<span class="gl-st-num">5</span><strong>Done</strong><em>step 5 / 5</em>
</li>
</ol>.gl-st {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 60% at 50% 50%, rgba(163,148,77,0.14), transparent 60%),
#1a1608;
font-family: 'Inter', system-ui, sans-serif;
color: #fef9c3;
box-sizing: border-box;
align-content: center;
list-style: none;
margin: 0;
position: relative;
}
.gl-st-step {
position: relative;
display: flex; flex-direction: column;
align-items: center; justify-content: flex-start;
gap: 8px;
text-align: center;
padding: 14px 8px;
z-index: 1;
}
.gl-st-step::before {
content: ''; position: absolute;
top: 38px; left: 0; right: 0;
height: 4px; background: rgba(163,148,77,0.2);
z-index: 0;
}
.gl-st-step:first-child::before { left: 50%; }
.gl-st-step:last-child::before { right: 50%; }
.gl-st-num {
position: relative;
width: 48px; height: 48px;
border-radius: 50%;
background: #2a2410;
border: 2px solid rgba(163,148,77,0.3);
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-weight: 700; font-size: 16px;
color: #a3944d;
z-index: 2;
}
.gl-st-done .gl-st-num { background: linear-gradient(135deg, #a3944d, #ca8a04); border-color: #ca8a04; color: #1a1608; }
.gl-st-done::before { background: linear-gradient(90deg, #a3944d, #ca8a04); }
.gl-st-active .gl-st-num {
background: linear-gradient(135deg, #facc15, #eab308);
border-color: #facc15; color: #1a1608;
box-shadow: 0 0 0 6px rgba(250,204,21,0.18);
}
.gl-st-step strong { font-size: 13px; font-weight: 700; color: #fef9c3; }
.gl-st-active strong, .gl-st-done strong { color: #facc15; }
.gl-st-step em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; color: #a3944d;
letter-spacing: 0.04em;
}
@media (max-width: 720px) {
.gl-st { grid-template-columns: 1fr; gap: 14px; }
.gl-st-step::before { display: none; }
} .gl-st {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
width: 100%;
min-height: 480px;
padding: 22px;
background:
radial-gradient(60% 60% at 50% 50%, rgba(163,148,77,0.14), transparent 60%),
#1a1608;
font-family: 'Inter', system-ui, sans-serif;
color: #fef9c3;
box-sizing: border-box;
align-content: center;
list-style: none;
margin: 0;
position: relative;
}
.gl-st-step {
position: relative;
display: flex; flex-direction: column;
align-items: center; justify-content: flex-start;
gap: 8px;
text-align: center;
padding: 14px 8px;
z-index: 1;
}
.gl-st-step::before {
content: ''; position: absolute;
top: 38px; left: 0; right: 0;
height: 4px; background: rgba(163,148,77,0.2);
z-index: 0;
}
.gl-st-step:first-child::before { left: 50%; }
.gl-st-step:last-child::before { right: 50%; }
.gl-st-num {
position: relative;
width: 48px; height: 48px;
border-radius: 50%;
background: #2a2410;
border: 2px solid rgba(163,148,77,0.3);
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-weight: 700; font-size: 16px;
color: #a3944d;
z-index: 2;
}
.gl-st-done .gl-st-num { background: linear-gradient(135deg, #a3944d, #ca8a04); border-color: #ca8a04; color: #1a1608; }
.gl-st-done::before { background: linear-gradient(90deg, #a3944d, #ca8a04); }
.gl-st-active .gl-st-num {
background: linear-gradient(135deg, #facc15, #eab308);
border-color: #facc15; color: #1a1608;
box-shadow: 0 0 0 6px rgba(250,204,21,0.18);
}
.gl-st-step strong { font-size: 13px; font-weight: 700; color: #fef9c3; }
.gl-st-active strong, .gl-st-done strong { color: #facc15; }
.gl-st-step em {
font-style: normal;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; color: #a3944d;
letter-spacing: 0.04em;
}
@media (max-width: 720px) {
.gl-st { grid-template-columns: 1fr; gap: 14px; }
.gl-st-step::before { display: none; }
}