|$ curl https://forge-ai.dev/api/markdown?path=docs/components/steppers

$cat docs/steppers-&-wizards.md

updated Recently·22 min read·published

Steppers & Wizards

◆CSS◆HTML◆Tailwind◆Bootstrap◆UI◆Intermediate🎯Free Tools

Introduction

Steppers visualize progress through a multi-step process. This guide covers production-ready patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap \u2014 from simple numbered indicators to interactive wizards, vertical timelines, compact inline steppers, and validation states.

ℹ

info

Use aria-current="step" on the active step so screen readers announce the current position. Keep step labels short and avoid relying on color alone.

Basic Horizontal Stepper

A numbered step indicator showing completed, active, and upcoming steps connected by lines. Completed steps display a checkmark, the active step is highlighted with a glow, and upcoming steps remain dimmed.

basic-stepper

Live

untitled.html

HTML

1	<div class="stepper">
2	<div class="step done">
3	<div class="step-circle">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="14" height="14">
5	<polyline points="20 6 9 17 4 12"/>
6	</svg>
7	</div>
8	<span class="step-label">
9	Account
10	</span>
11	</div>
12	<div class="step-line done">
13	</div>
14	<div class="step done">
15	<div class="step-circle">
16	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="14" height="14">
17	<polyline points="20 6 9 17 4 12"/>
18	</svg>
19	</div>
20	<span class="step-label">
21	Profile
22	</span>
23	</div>
24	<div class="step-line done">
25	</div>
26	<div class="step active">
27	<div class="step-circle">
28	3
29	</div>
30	<span class="step-label">
31	Billing
32	</span>
33	</div>
34	<div class="step-line">
35	</div>
36	<div class="step">
37	<div class="step-circle">
38	4
39	</div>
40	<span class="step-label">
41	Confirm
42	</span>
43	</div>
44	</div>

untitled.html

HTML

1	<div class="flex items-center justify-center py-6 px-4 bg-[#0A0A0A]">
2	<div class="flex flex-col items-center gap-1.5 z-10">
3	<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold border-2 border-[#00FF41] bg-[#00FF41] text-[#0A0A0A]">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="14" height="14">
5	<polyline points="20 6 9 17 4 12"/>
6	</svg>
7	</div>
8	<span class="text-[10px] font-medium text-[#808080] whitespace-nowrap">
9	Account
10	</span>
11	</div>
12	<div class="flex-1 h-0.5 min-w-[40px] max-w-[80px] -mx-1 mb-5 bg-[#00FF41]">
13	</div>
14	<div class="flex flex-col items-center gap-1.5 z-10">
15	<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold border-2 border-[#00FF41] bg-[#00FF41] text-[#0A0A0A]">
16	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="14" height="14">
17	<polyline points="20 6 9 17 4 12"/>
18	</svg>
19	</div>
20	<span class="text-[10px] font-medium text-[#808080] whitespace-nowrap">
21	Profile
22	</span>
23	</div>
24	<div class="flex-1 h-0.5 min-w-[40px] max-w-[80px] -mx-1 mb-5 bg-[#00FF41]">
25	</div>
26	<div class="flex flex-col items-center gap-1.5 z-10">
27	<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold border-2 border-[#00FF41] bg-[#0A0A0A] text-[#00FF41] shadow-[0_0_12px_rgba(0,255,65,0.3)]">
28	3
29	</div>
30	<span class="text-[10px] font-semibold text-[#00FF41] whitespace-nowrap">
31	Billing
32	</span>
33	</div>
34	<div class="flex-1 h-0.5 min-w-[40px] max-w-[80px] -mx-1 mb-5 bg-[#222222]">
35	</div>
36	<div class="flex flex-col items-center gap-1.5 z-10">
37	<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold border-2 border-[#333333] bg-[#0A0A0A] text-[#555555]">
38	4
39	</div>
40	<span class="text-[10px] font-medium text-[#666666] whitespace-nowrap">
41	Confirm
42	</span>
43	</div>
44	</div>

untitled.html

HTML

1	<div class="d-flex align-items-center justify-content-center py-4 px-3 bg-dark">
2	<div class="d-flex flex-column align-items-center gap-1" style="z-index:1">
3	<div class="d-flex align-items-center justify-content-center rounded-circle fw-bold text-sm" style="width:32px;height:32px;border:2px solid #00FF41;background:#00FF41;color:#0A0A0A">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="14" height="14">
5	<polyline points="20 6 9 17 4 12"/>
6	</svg>
7	</div>
8	<span class="small text-secondary" style="font-size:10px;white-space:nowrap">
9	Account
10	</span>
11	</div>
12	<div class="flex-fill mx-n1 mb-4" style="height:2px;min-width:40px;max-width:80px;background:#00FF41">
13	</div>
14	<div class="d-flex flex-column align-items-center gap-1" style="z-index:1">
15	<div class="d-flex align-items-center justify-content-center rounded-circle fw-bold text-sm" style="width:32px;height:32px;border:2px solid #00FF41;background:#00FF41;color:#0A0A0A">
16	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="14" height="14">
17	<polyline points="20 6 9 17 4 12"/>
18	</svg>
19	</div>
20	<span class="small text-secondary" style="font-size:10px;white-space:nowrap">
21	Profile
22	</span>
23	</div>
24	<div class="flex-fill mx-n1 mb-4" style="height:2px;min-width:40px;max-width:80px;background:#00FF41">
25	</div>
26	<div class="d-flex flex-column align-items-center gap-1" style="z-index:1">
27	<div class="d-flex align-items-center justify-content-center rounded-circle fw-bold text-sm" style="width:32px;height:32px;border:2px solid #00FF41;background:#0A0A0A;color:#00FF41;box-shadow:0 0 12px rgba(0,255,65,.3)">
28	3
29	</div>
30	<span class="small fw-semibold" style="font-size:10px;color:#00FF41;white-space:nowrap">
31	Billing
32	</span>
33	</div>
34	<div class="flex-fill mx-n1 mb-4" style="height:2px;min-width:40px;max-width:80px;background:#222">
35	</div>
36	<div class="d-flex flex-column align-items-center gap-1" style="z-index:1">
37	<div class="d-flex align-items-center justify-content-center rounded-circle fw-bold text-sm" style="width:32px;height:32px;border:2px solid #333;background:#0A0A0A;color:#555">
38	4
39	</div>
40	<span class="small text-secondary" style="font-size:10px;white-space:nowrap">
41	Confirm
42	</span>
43	</div>
44	</div>

preview

Interactive Wizard

A fully interactive wizard with back/next navigation. Each step displays different content, and the indicator updates to reflect the current position. The final step changes the Next button to a Finish button.

interactive-wizard

Live

untitled.html

HTML

1	<div class="wizard">
2	<div class="w-stepper">
3	<div class="ws done" data-step="0">
4	<span class="ws-n">
5	1
6	</span>
7	<span class="ws-t">
8	Details
9	</span>
10	</div>
11	<div class="ws-line done">
12	</div>
13	<div class="ws active" data-step="1">
14	<span class="ws-n">
15	2
16	</span>
17	<span class="ws-t">
18	Preferences
19	</span>
20	</div>
21	<div class="ws-line">
22	</div>
23	<div class="ws" data-step="2">
24	<span class="ws-n">
25	3
26	</span>
27	<span class="ws-t">
28	Review
29	</span>
30	</div>
31	</div>
32	<div class="w-content" id="w-content">
33	<div class="w-panel active" data-panel="0">
34	<h4>
35	Account Details
36	</h4>
37	<p>
38	Enter your name and email address to create your account.
39	</p>
40	<div class="w-field">
41	<label>
42	Full Name
43	</label>
44	<input type="text" placeholder="Jane Doe" class="w-input"/>
45	</div>
46	<div class="w-field">
47	<label>
48	Email
49	</label>
50	<input type="email" placeholder="jane@example.com" class="w-input"/>
51	</div>
52	</div>
53	<div class="w-panel" data-panel="1">
54	<h4>
55	Preferences
56	</h4>
57	<p>
58	Choose your notification and display preferences.
59	</p>
60	<label class="w-check">
61	<input type="checkbox" checked/>
62	Email notifications
63	</label>
64	<label class="w-check">
65	<input type="checkbox"/>
66	Dark mode
67	</label>
68	<label class="w-check">
69	<input type="checkbox" checked/>
70	Weekly digest
71	</label>
72	</div>
73	<div class="w-panel" data-panel="2">
74	<h4>
75	Review & Confirm
76	</h4>
77	<p>
78	Review your settings before completing setup.
79	</p>
80	<div class="w-summary">
81	<div class="ws-row">
82	<span>
83	Name
84	</span>
85	<span>
86	Jane Doe
87	</span>
88	</div>
89	<div class="ws-row">
90	<span>
91	Email
92	</span>
93	<span>
94	jane@example.com
95	</span>
96	</div>
97	<div class="ws-row">
98	<span>
99	Notifications
100	</span>
101	<span>
102	Enabled
103	</span>
104	</div>
105	</div>
106	</div>
107	</div>
108	<div class="w-actions">
109	<button class="w-btn secondary" id="w-back" disabled>
110	Back
111	</button>
112	<button class="w-btn primary" id="w-next">
113	Next
114	</button>
115	</div>
116	</div>

untitled.css

CSS

1	.wizard {
2	max-width:380px;
3	margin:16px auto;
4	border:1px solid #222;
5	border-radius:12px;
6	overflow:hidden;
7	background:#111;
8	font-family:system-ui,
9	sans-serif
10	}
11	.w-stepper {
12	display:flex;
13	align-items:center;
14	padding:16px 20px;
15	border-bottom:1px solid #222
16	}
17	.ws {
18	display:flex;
19	align-items:center;
20	gap:6px;
21	opacity:.4;
22	transition:opacity .2s
23	}
24	.ws.done,
25	.ws.active {
26	opacity:1
27	}
28	.ws-n {
29	width:24px;
30	height:24px;
31	border-radius:50%;
32	display:flex;
33	align-items:center;
34	justify-content:center;
35	font-size:11px;
36	font-weight:700;
37	border:2px solid #333;
38	color:#555;
39	background:#0A0A0A
40	}
41	.ws.done .ws-n {
42	background:#00FF41;
43	border-color:#00FF41;
44	color:#0A0A0A
45	}
46	.ws.active .ws-n {
47	border-color:#00FF41;
48	color:#00FF41
49	}
50	.ws-t {
51	font-size:11px;
52	color:#808080;
53	font-weight:500
54	}
55	.ws.active .ws-t {
56	color:#00FF41;
57	font-weight:600
58	}
59	.ws-line {
60	flex:1;
61	height:2px;
62	background:#222;
63	margin:0 8px
64	}
65	.ws-line.done {
66	background:#00FF41
67	}
68	.w-content {
69	padding:20px;
70	min-height:160px
71	}
72	.w-panel {
73	display:none
74	}
75	.w-panel.active {
76	display:block;
77	animation:fadeUp .3s ease
78	}
79	.w-panel h4 {
80	font-size:14px;
81	font-weight:600;
82	color:#E0E0E0;
83	margin:0 0 6px
84	}
85	.w-panel p {
86	font-size:12px;
87	color:#808080;
88	margin:0 0 16px;
89	line-height:1.5
90	}
91	.w-field {
92	margin-bottom:12px
93	}
94	.w-field label {
95	display:block;
96	font-size:10px;
97	color:#666;
98	text-transform:uppercase;
99	letter-spacing:.5px;
100	margin-bottom:4px
101	}
102	.w-input {
103	width:100%;
104	padding:8px 10px;
105	border-radius:6px;
106	border:1px solid #2A2A3E;
107	background:#0A0A0A;
108	color:#E0E0E0;
109	font-size:12px;
110	font-family:system-ui,
111	sans-serif;
112	outline:none
113	}
114	.w-input:focus {
115	border-color:#00FF41
116	}
117	.w-check {
118	display:flex;
119	align-items:center;
120	gap:8px;
121	padding:8px 0;
122	font-size:12px;
123	color:#C0C0C0;
124	cursor:pointer
125	}
126	.w-check input[type=checkbox] {
127	width:16px;
128	height:16px;
129	accent-color:#00FF41
130	}
131	.w-summary {
132	background:#0A0A0A;
133	border-radius:8px;
134	padding:12px;
135	border:1px solid #222
136	}
137	.ws-row {
138	display:flex;
139	justify-content:space-between;
140	padding:6px 0;
141	font-size:12px;
142	border-bottom:1px solid #1A1A1A
143	}
144	.ws-row:last-child {
145	border:none
146	}
147	.ws-row span:first-child {
148	color:#666
149	}
150	.ws-row span:last-child {
151	color:#E0E0E0;
152	font-weight:500
153	}
154	.w-actions {
155	display:flex;
156	gap:10px;
157	padding:16px 20px;
158	border-top:1px solid #222;
159	background:#151515
160	}
161	.w-btn {
162	flex:1;
163	padding:10px 16px;
164	border-radius:8px;
165	font-size:12px;
166	font-weight:600;
167	border:none;
168	cursor:pointer;
169	transition:all .2s;
170	font-family:system-ui,
171	sans-serif
172	}
173	.w-btn:disabled {
174	opacity:.4;
175	cursor:not-allowed
176	}
177	.w-btn.primary {
178	background:#00FF41;
179	color:#0A0A0A
180	}
181	.w-btn.primary:hover:not(:disabled) {
182	background:#00E63A
183	}
184	.w-btn.secondary {
185	background:#1A1A2E;
186	color:#E0E0E0;
187	border:1px solid #2A2A3E
188	}
189	.w-btn.secondary:hover:not(:disabled) {
190	background:#22223A
191	}
192	@keyframes fadeUp {
193	from {
194	opacity:0;
195	transform:translateY(6px)
196	}
197	to {
198	opacity:1;
199	transform:translateY(0)
200	}
201	}

untitled.html

HTML

1	<div class="max-w-sm mx-auto my-4 border border-[#222222] rounded-xl overflow-hidden bg-[#111111] font-sans">
2	<div class="flex items-center px-5 py-4 border-b border-[#222222]" id="tw-steps">
3	<div class="flex items-center gap-1.5 opacity-40 transition-opacity" data-step="0">
4	<span class="w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold border-2 border-[#333333] bg-[#0A0A0A] text-[#555555]">
5	1
6	</span>
7	<span class="text-[11px] font-medium text-[#808080]">
8	Details
9	</span>
10	</div>
11	<div class="flex-1 h-0.5 mx-2 bg-[#222222]">
12	</div>
13	<div class="flex items-center gap-1.5 opacity-40 transition-opacity" data-step="1">
14	<span class="w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold border-2 border-[#333333] bg-[#0A0A0A] text-[#555555]">
15	2
16	</span>
17	<span class="text-[11px] font-medium text-[#808080]">
18	Preferences
19	</span>
20	</div>
21	<div class="flex-1 h-0.5 mx-2 bg-[#222222]">
22	</div>
23	<div class="flex items-center gap-1.5 opacity-40 transition-opacity" data-step="2">
24	<span class="w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold border-2 border-[#333333] bg-[#0A0A0A] text-[#555555]">
25	3
26	</span>
27	<span class="text-[11px] font-medium text-[#808080]">
28	Review
29	</span>
30	</div>
31	</div>
32	<div class="p-5 min-h-[160px]" id="tw-panels">
33	<div data-panel="0" class="hidden animate-[fadeIn_0.3s_ease]">
34	<h4 class="text-sm font-semibold text-[#E0E0E0] mb-1.5">
35	Account Details
36	</h4>
37	<p class="text-xs text-[#808080] mb-4 leading-relaxed">
38	Enter your name and email address to create your account.
39	</p>
40	<div class="mb-3">
41	<label class="block text-[10px] text-[#666666] uppercase tracking-wide mb-1">
42	Full Name
43	</label>
44	<input type="text" placeholder="Jane Doe" class="w-full px-2.5 py-2 rounded-md border border-[#2A2A3E] bg-[#0A0A0A] text-[#E0E0E0] text-xs outline-none focus:border-[#00FF41]"/>
45	</div>
46	<div class="mb-3">
47	<label class="block text-[10px] text-[#666666] uppercase tracking-wide mb-1">
48	Email
49	</label>
50	<input type="email" placeholder="jane@example.com" class="w-full px-2.5 py-2 rounded-md border border-[#2A2A3E] bg-[#0A0A0A] text-[#E0E0E0] text-xs outline-none focus:border-[#00FF41]"/>
51	</div>
52	</div>
53	<div data-panel="1" class="hidden animate-[fadeIn_0.3s_ease]">
54	<h4 class="text-sm font-semibold text-[#E0E0E0] mb-1.5">
55	Preferences
56	</h4>
57	<p class="text-xs text-[#808080] mb-4 leading-relaxed">
58	Choose your notification and display preferences.
59	</p>
60	<label class="flex items-center gap-2 py-2 text-xs text-[#C0C0C0] cursor-pointer">
61	<input type="checkbox" checked class="w-4 h-4 accent-[#00FF41]"/>
62	Email notifications
63	</label>
64	<label class="flex items-center gap-2 py-2 text-xs text-[#C0C0C0] cursor-pointer">
65	<input type="checkbox" class="w-4 h-4 accent-[#00FF41]"/>
66	Dark mode
67	</label>
68	<label class="flex items-center gap-2 py-2 text-xs text-[#C0C0C0] cursor-pointer">
69	<input type="checkbox" checked class="w-4 h-4 accent-[#00FF41]"/>
70	Weekly digest
71	</label>
72	</div>
73	<div data-panel="2" class="hidden animate-[fadeIn_0.3s_ease]">
74	<h4 class="text-sm font-semibold text-[#E0E0E0] mb-1.5">
75	Review & Confirm
76	</h4>
77	<p class="text-xs text-[#808080] mb-4 leading-relaxed">
78	Review your settings before completing setup.
79	</p>
80	<div class="bg-[#0A0A0A] rounded-lg p-3 border border-[#222222]">
81	<div class="flex justify-between py-1.5 text-xs border-b border-[#1A1A2E]">
82	<span class="text-[#666666]">
83	Name
84	</span>
85	<span class="text-[#E0E0E0] font-medium">
86	Jane Doe
87	</span>
88	</div>
89	<div class="flex justify-between py-1.5 text-xs border-b border-[#1A1A2E]">
90	<span class="text-[#666666]">
91	Email
92	</span>
93	<span class="text-[#E0E0E0] font-medium">
94	jane@example.com
95	</span>
96	</div>
97	<div class="flex justify-between py-1.5 text-xs">
98	<span class="text-[#666666]">
99	Notifications
100	</span>
101	<span class="text-[#E0E0E0] font-medium">
102	Enabled
103	</span>
104	</div>
105	</div>
106	</div>
107	</div>
108	<div class="flex gap-2.5 px-5 py-4 border-t border-[#222222] bg-[#151515]">
109	<button id="tw-back" class="flex-1 py-2.5 px-4 rounded-lg text-xs font-semibold bg-[#1A1A2E] text-[#E0E0E0] border border-[#2A2A3E] disabled:opacity-40 disabled:cursor-not-allowed hover:bg-[#22223A]" disabled>
110	Back
111	</button>
112	<button id="tw-next" class="flex-1 py-2.5 px-4 rounded-lg text-xs font-semibold bg-[#00FF41] text-[#0A0A0A] hover:bg-[#00E63A]">
113	Next
114	</button>
115	</div>
116	</div>

untitled.html

HTML

1	<div class="mx-auto my-3 border border-secondary rounded-3 overflow-hidden" style="max-width:380px;background:#111">
2	<div class="d-flex align-items-center px-4 py-3 border-bottom border-secondary" id="bs-steps">
3	<div class="d-flex align-items-center gap-2" style="opacity:.4" data-step="0">
4	<span class="d-flex align-items-center justify-content-center rounded-circle fw-bold" style="width:24px;height:24px;font-size:11px;border:2px solid #333;background:#0A0A0A;color:#555">
5	1
6	</span>
7	<span class="small text-secondary" style="font-size:11px">
8	Details
9	</span>
10	</div>
11	<div class="flex-fill mx-2" style="height:2px;background:#222">
12	</div>
13	<div class="d-flex align-items-center gap-2" style="opacity:.4" data-step="1">
14	<span class="d-flex align-items-center justify-content-center rounded-circle fw-bold" style="width:24px;height:24px;font-size:11px;border:2px solid #333;background:#0A0A0A;color:#555">
15	2
16	</span>
17	<span class="small text-secondary" style="font-size:11px">
18	Preferences
19	</span>
20	</div>
21	<div class="flex-fill mx-2" style="height:2px;background:#222">
22	</div>
23	<div class="d-flex align-items-center gap-2" style="opacity:.4" data-step="2">
24	<span class="d-flex align-items-center justify-content-center rounded-circle fw-bold" style="width:24px;height:24px;font-size:11px;border:2px solid #333;background:#0A0A0A;color:#555">
25	3
26	</span>
27	<span class="small text-secondary" style="font-size:11px">
28	Review
29	</span>
30	</div>
31	</div>
32	<div class="p-4" style="min-height:160px" id="bs-panels">
33	<div data-panel="0" style="display:none">
34	<h4 class="h6 fw-semibold text-light mb-1">
35	Account Details
36	</h4>
37	<p class="small text-secondary mb-3">
38	Enter your name and email address to create your account.
39	</p>
40	<div class="mb-2">
41	<label class="form-label text-uppercase" style="font-size:10px;color:#666">
42	Full Name
43	</label>
44	<input type="text" class="form-control form-control-sm bg-dark border-secondary text-light" placeholder="Jane Doe"/>
45	</div>
46	<div class="mb-2">
47	<label class="form-label text-uppercase" style="font-size:10px;color:#666">
48	Email
49	</label>
50	<input type="email" class="form-control form-control-sm bg-dark border-secondary text-light" placeholder="jane@example.com"/>
51	</div>
52	</div>
53	<div data-panel="1" style="display:none">
54	<h4 class="h6 fw-semibold text-light mb-1">
55	Preferences
56	</h4>
57	<p class="small text-secondary mb-3">
58	Choose your notification and display preferences.
59	</p>
60	<div class="form-check">
61	<input class="form-check-input" type="checkbox" checked/>
62	<label class="form-check-label text-secondary small">
63	Email notifications
64	</label>
65	</div>
66	<div class="form-check">
67	<input class="form-check-input" type="checkbox"/>
68	<label class="form-check-label text-secondary small">
69	Dark mode
70	</label>
71	</div>
72	<div class="form-check">
73	<input class="form-check-input" type="checkbox" checked/>
74	<label class="form-check-label text-secondary small">
75	Weekly digest
76	</label>
77	</div>
78	</div>
79	<div data-panel="2" style="display:none">
80	<h4 class="h6 fw-semibold text-light mb-1">
81	Review & Confirm
82	</h4>
83	<p class="small text-secondary mb-3">
84	Review your settings before completing setup.
85	</p>
86	<div class="p-3 rounded border border-secondary" style="background:#0A0A0A">
87	<div class="d-flex justify-content-between py-1 small border-bottom border-dark">
88	<span class="text-secondary">
89	Name
90	</span>
91	<span class="text-light">
92	Jane Doe
93	</span>
94	</div>
95	<div class="d-flex justify-content-between py-1 small border-bottom border-dark">
96	<span class="text-secondary">
97	Email
98	</span>
99	<span class="text-light">
100	jane@example.com
101	</span>
102	</div>
103	<div class="d-flex justify-content-between py-1 small">
104	<span class="text-secondary">
105	Notifications
106	</span>
107	<span class="text-light">
108	Enabled
109	</span>
110	</div>
111	</div>
112	</div>
113	</div>
114	<div class="d-flex gap-2 px-4 py-3 border-top border-secondary" style="background:#151515">
115	<button id="bs-back" class="btn btn-dark border-secondary flex-fill fw-semibold btn-sm" disabled>
116	Back
117	</button>
118	<button id="bs-next" class="btn btn-success flex-fill fw-semibold btn-sm" style="--bs-btn-bg:#00FF41;--bs-btn-color:#0A0A0A;--bs-btn-border-color:#00FF41;--bs-btn-hover-bg:#00E63A">
119	Next
120	</button>
121	</div>
122	</div>

preview

Vertical Stepper

A vertical step layout for sidebars, mobile views, or contexts where horizontal space is limited. Each step shows its content inline below the indicator, connected by a vertical line.

vertical-stepper

Live

untitled.html

HTML

1	<div class="v-stepper">
2	<div class="vs done">
3	<div class="vs-indicator">
4	<div class="vs-dot">
5	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="12" height="12">
6	<polyline points="20 6 9 17 4 12"/>
7	</svg>
8	</div>
9	<div class="vs-line">
10	</div>
11	</div>
12	<div class="vs-body">
13	<h5>
14	Order Placed
15	</h5>
16	<p>
17	Your order #4829 has been confirmed and is being prepared.
18	</p>
19	<span class="vs-time">
20	2 minutes ago
21	</span>
22	</div>
23	</div>
24	<div class="vs done">
25	<div class="vs-indicator">
26	<div class="vs-dot">
27	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="12" height="12">
28	<polyline points="20 6 9 17 4 12"/>
29	</svg>
30	</div>
31	<div class="vs-line">
32	</div>
33	</div>
34	<div class="vs-body">
35	<h5>
36	Processing
37	</h5>
38	<p>
39	Items are being picked and packed at the warehouse.
40	</p>
41	<span class="vs-time">
42	15 minutes ago
43	</span>
44	</div>
45	</div>
46	<div class="vs active">
47	<div class="vs-indicator">
48	<div class="vs-dot">
49	</div>
50	<div class="vs-line">
51	</div>
52	</div>
53	<div class="vs-body">
54	<h5>
55	Shipped
56	</h5>
57	<p>
58	Your package is on its way via FedEx Express.
59	</p>
60	<span class="vs-time">
61	In transit
62	</span>
63	</div>
64	</div>
65	<div class="vs">
66	<div class="vs-indicator">
67	<div class="vs-dot">
68	</div>
69	</div>
70	<div class="vs-body">
71	<h5>
72	Delivered
73	</h5>
74	<p>
75	Estimated arrival: tomorrow by 6 PM.
76	</p>
77	<span class="vs-time">
78	Pending
79	</span>
80	</div>
81	</div>
82	</div>

untitled.html

HTML

1	<div class="max-w-xs mx-auto p-4 bg-[#0A0A0A]">
2	<div class="flex gap-3">
3	<div class="flex flex-col items-center flex-shrink-0">
4	<div class="w-6 h-6 rounded-full flex items-center justify-center border-2 border-[#00FF41] bg-[#00FF41] text-[#0A0A0A]">
5	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="12" height="12">
6	<polyline points="20 6 9 17 4 12"/>
7	</svg>
8	</div>
9	<div class="w-0.5 flex-1 bg-[#00FF41] my-1">
10	</div>
11	</div>
12	<div class="pb-5 flex-1">
13	<h5 class="text-xs font-semibold text-[#808080] mb-1">
14	Order Placed
15	</h5>
16	<p class="text-[11px] text-[#666666] mb-1 leading-relaxed">
17	Your order #4829 has been confirmed and is being prepared.
18	</p>
19	<span class="text-[10px] text-[#555555]">
20	2 minutes ago
21	</span>
22	</div>
23	</div>
24	<div class="flex gap-3">
25	<div class="flex flex-col items-center flex-shrink-0">
26	<div class="w-6 h-6 rounded-full flex items-center justify-center border-2 border-[#00FF41] bg-[#00FF41] text-[#0A0A0A]">
27	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="12" height="12">
28	<polyline points="20 6 9 17 4 12"/>
29	</svg>
30	</div>
31	<div class="w-0.5 flex-1 bg-[#00FF41] my-1">
32	</div>
33	</div>
34	<div class="pb-5 flex-1">
35	<h5 class="text-xs font-semibold text-[#808080] mb-1">
36	Processing
37	</h5>
38	<p class="text-[11px] text-[#666666] mb-1 leading-relaxed">
39	Items are being picked and packed at the warehouse.
40	</p>
41	<span class="text-[10px] text-[#555555]">
42	15 minutes ago
43	</span>
44	</div>
45	</div>
46	<div class="flex gap-3">
47	<div class="flex flex-col items-center flex-shrink-0">
48	<div class="w-6 h-6 rounded-full flex items-center justify-center border-2 border-[#00FF41] bg-[#0A0A0A] text-[#00FF41] shadow-[0_0_10px_rgba(0,255,65,0.3)]">
49	</div>
50	<div class="w-0.5 flex-1 bg-[#222222] my-1">
51	</div>
52	</div>
53	<div class="pb-5 flex-1">
54	<h5 class="text-xs font-semibold text-[#E0E0E0] mb-1">
55	Shipped
56	</h5>
57	<p class="text-[11px] text-[#666666] mb-1 leading-relaxed">
58	Your package is on its way via FedEx Express.
59	</p>
60	<span class="text-[10px] text-[#00FF41]">
61	In transit
62	</span>
63	</div>
64	</div>
65	<div class="flex gap-3">
66	<div class="flex flex-col items-center flex-shrink-0">
67	<div class="w-6 h-6 rounded-full flex items-center justify-center border-2 border-[#333333] bg-[#0A0A0A] text-[#555555]">
68	</div>
69	</div>
70	<div class="pb-5 flex-1">
71	<h5 class="text-xs font-semibold text-[#E0E0E0] mb-1">
72	Delivered
73	</h5>
74	<p class="text-[11px] text-[#666666] mb-1 leading-relaxed">
75	Estimated arrival: tomorrow by 6 PM.
76	</p>
77	<span class="text-[10px] text-[#555555]">
78	Pending
79	</span>
80	</div>
81	</div>
82	</div>

untitled.html

HTML

1	<div class="mx-auto p-3 bg-dark" style="max-width:340px">
2	<div class="d-flex gap-3">
3	<div class="d-flex flex-column align-items-center flex-shrink-0">
4	<div class="d-flex align-items-center justify-content-center rounded-circle" style="width:24px;height:24px;border:2px solid #00FF41;background:#00FF41;color:#0A0A0A">
5	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="12" height="12">
6	<polyline points="20 6 9 17 4 12"/>
7	</svg>
8	</div>
9	<div class="flex-fill my-1" style="width:2px;background:#00FF41">
10	</div>
11	</div>
12	<div class="pb-4 flex-fill">
13	<h5 class="mb-1" style="font-size:12px;font-weight:600;color:#808080">
14	Order Placed
15	</h5>
16	<p class="mb-1 text-secondary" style="font-size:11px;line-height:1.5">
17	Your order #4829 has been confirmed and is being prepared.
18	</p>
19	<span class="text-secondary" style="font-size:10px">
20	2 minutes ago
21	</span>
22	</div>
23	</div>
24	<div class="d-flex gap-3">
25	<div class="d-flex flex-column align-items-center flex-shrink-0">
26	<div class="d-flex align-items-center justify-content-center rounded-circle" style="width:24px;height:24px;border:2px solid #00FF41;background:#00FF41;color:#0A0A0A">
27	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="12" height="12">
28	<polyline points="20 6 9 17 4 12"/>
29	</svg>
30	</div>
31	<div class="flex-fill my-1" style="width:2px;background:#00FF41">
32	</div>
33	</div>
34	<div class="pb-4 flex-fill">
35	<h5 class="mb-1" style="font-size:12px;font-weight:600;color:#808080">
36	Processing
37	</h5>
38	<p class="mb-1 text-secondary" style="font-size:11px;line-height:1.5">
39	Items are being picked and packed at the warehouse.
40	</p>
41	<span class="text-secondary" style="font-size:10px">
42	15 minutes ago
43	</span>
44	</div>
45	</div>
46	<div class="d-flex gap-3">
47	<div class="d-flex flex-column align-items-center flex-shrink-0">
48	<div class="d-flex align-items-center justify-content-center rounded-circle" style="width:24px;height:24px;border:2px solid #00FF41;background:#0A0A0A;color:#00FF41;box-shadow:0 0 10px rgba(0,255,65,.3)">
49	</div>
50	<div class="flex-fill my-1" style="width:2px;background:#222">
51	</div>
52	</div>
53	<div class="pb-4 flex-fill">
54	<h5 class="mb-1" style="font-size:12px;font-weight:600;color:#E0E0E0">
55	Shipped
56	</h5>
57	<p class="mb-1 text-secondary" style="font-size:11px;line-height:1.5">
58	Your package is on its way via FedEx Express.
59	</p>
60	<span style="font-size:10px;color:#00FF41">
61	In transit
62	</span>
63	</div>
64	</div>
65	<div class="d-flex gap-3">
66	<div class="d-flex flex-column align-items-center flex-shrink-0">
67	<div class="d-flex align-items-center justify-content-center rounded-circle" style="width:24px;height:24px;border:2px solid #333;background:#0A0A0A;color:#555">
68	</div>
69	</div>
70	<div class="pb-4 flex-fill">
71	<h5 class="mb-1" style="font-size:12px;font-weight:600;color:#E0E0E0">
72	Delivered
73	</h5>
74	<p class="mb-1 text-secondary" style="font-size:11px;line-height:1.5">
75	Estimated arrival: tomorrow by 6 PM.
76	</p>
77	<span class="text-secondary" style="font-size:10px">
78	Pending
79	</span>
80	</div>
81	</div>
82	</div>

preview

Labeled Steps with Icons

Steps with icons, labels, and sub-labels for richer context. Useful for checkout flows and onboarding where each step has a clear title and description. Uses square icons instead of circles for visual variety.

labeled-steps

Live

untitled.html

HTML

1	<div class="labeled-stepper">
2	<div class="ls done">
3	<div class="ls-icon">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
5	<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
6	<polyline points="9 22 9 12 15 12 15 22"/>
7	</svg>
8	</div>
9	<div class="ls-info">
10	<span class="ls-title">
11	Address
12	</span>
13	<span class="ls-sub">
14	Shipping info
15	</span>
16	</div>
17	</div>
18	<div class="ls-conn done">
19	</div>
20	<div class="ls done">
21	<div class="ls-icon">
22	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
23	<rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
24	<line x1="1" y1="10" x2="23" y2="10"/>
25	</svg>
26	</div>
27	<div class="ls-info">
28	<span class="ls-title">
29	Payment
30	</span>
31	<span class="ls-sub">
32	Card details
33	</span>
34	</div>
35	</div>
36	<div class="ls-conn">
37	</div>
38	<div class="ls active">
39	<div class="ls-icon">
40	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
41	<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
42	<polyline points="22 4 12 14.01 9 11.01"/>
43	</svg>
44	</div>
45	<div class="ls-info">
46	<span class="ls-title">
47	Confirm
48	</span>
49	<span class="ls-sub">
50	Review order
51	</span>
52	</div>
53	</div>
54	</div>

untitled.html

HTML

1	<div class="flex items-center justify-center py-8 px-4 bg-[#0A0A0A]">
2	<div class="flex items-center gap-2.5 opacity-100 transition-opacity">
3	<div class="w-9 h-9 rounded-lg flex items-center justify-center border-2 border-[#00FF41] bg-[#00FF41] text-[#0A0A0A]">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
5	<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
6	<polyline points="9 22 9 12 15 12 15 22"/>
7	</svg>
8	</div>
9	<div class="flex flex-col gap-0.5">
10	<span class="text-xs font-semibold text-[#808080]">
11	Address
12	</span>
13	<span class="text-[10px] text-[#555555]">
14	Shipping info
15	</span>
16	</div>
17	</div>
18	<div class="w-8 h-0.5 mx-1 mb-4 bg-[#00FF41]">
19	</div>
20	<div class="flex items-center gap-2.5 opacity-100 transition-opacity">
21	<div class="w-9 h-9 rounded-lg flex items-center justify-center border-2 border-[#00FF41] bg-[#00FF41] text-[#0A0A0A]">
22	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
23	<rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
24	<line x1="1" y1="10" x2="23" y2="10"/>
25	</svg>
26	</div>
27	<div class="flex flex-col gap-0.5">
28	<span class="text-xs font-semibold text-[#808080]">
29	Payment
30	</span>
31	<span class="text-[10px] text-[#555555]">
32	Card details
33	</span>
34	</div>
35	</div>
36	<div class="w-8 h-0.5 mx-1 mb-4 bg-[#222222]">
37	</div>
38	<div class="flex items-center gap-2.5 opacity-100 transition-opacity">
39	<div class="w-9 h-9 rounded-lg flex items-center justify-center border-2 border-[#00FF41] bg-[#0A0A0A] text-[#00FF41] shadow-[0_0_10px_rgba(0,255,65,0.3)]">
40	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
41	<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
42	<polyline points="22 4 12 14.01 9 11.01"/>
43	</svg>
44	</div>
45	<div class="flex flex-col gap-0.5">
46	<span class="text-xs font-semibold text-[#00FF41]">
47	Confirm
48	</span>
49	<span class="text-[10px] text-[#555555]">
50	Review order
51	</span>
52	</div>
53	</div>
54	</div>

untitled.html

HTML

1	<div class="d-flex align-items-center justify-content-center py-4 px-3 bg-dark">
2	<div class="d-flex align-items-center gap-2" style="opacity:1">
3	<div class="d-flex align-items-center justify-content-center rounded-2" style="width:36px;height:36px;border:2px solid #00FF41;background:#00FF41;color:#0A0A0A">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
5	<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
6	<polyline points="9 22 9 12 15 12 15 22"/>
7	</svg>
8	</div>
9	<div class="d-flex flex-column gap-0">
10	<span class="fw-semibold" style="font-size:12px;color:#808080">
11	Address
12	</span>
13	<span class="text-secondary" style="font-size:10px">
14	Shipping info
15	</span>
16	</div>
17	</div>
18	<div class="mx-1 mb-3" style="width:32px;height:2px;background:#00FF41">
19	</div>
20	<div class="d-flex align-items-center gap-2" style="opacity:1">
21	<div class="d-flex align-items-center justify-content-center rounded-2" style="width:36px;height:36px;border:2px solid #00FF41;background:#00FF41;color:#0A0A0A">
22	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
23	<rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
24	<line x1="1" y1="10" x2="23" y2="10"/>
25	</svg>
26	</div>
27	<div class="d-flex flex-column gap-0">
28	<span class="fw-semibold" style="font-size:12px;color:#808080">
29	Payment
30	</span>
31	<span class="text-secondary" style="font-size:10px">
32	Card details
33	</span>
34	</div>
35	</div>
36	<div class="mx-1 mb-3" style="width:32px;height:2px;background:#222">
37	</div>
38	<div class="d-flex align-items-center gap-2" style="opacity:1">
39	<div class="d-flex align-items-center justify-content-center rounded-2" style="width:36px;height:36px;border:2px solid #00FF41;background:#0A0A0A;color:#00FF41;box-shadow:0 0 10px rgba(0,255,65,.3)">
40	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
41	<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
42	<polyline points="22 4 12 14.01 9 11.01"/>
43	</svg>
44	</div>
45	<div class="d-flex flex-column gap-0">
46	<span class="fw-semibold" style="font-size:12px;color:#00FF41">
47	Confirm
48	</span>
49	<span class="text-secondary" style="font-size:10px">
50	Review order
51	</span>
52	</div>
53	</div>
54	</div>

preview

Minimal Progress Bar

A compact step indicator using a progress bar with step markers \u2014 minimal and space-efficient for toolbars and inline contexts. Shows current step, total steps, and percentage complete.

minimal-progress

Live

untitled.html

HTML

1	<div class="mini-progress">
2	<div class="mp-header">
3	<span class="mp-title">
4	Step 2 of 5
5	</span>
6	<span class="mp-pct">
7	40%
8	</span>
9	</div>
10	<div class="mp-track">
11	<div class="mp-fill" style="width:40%">
12	<div class="mp-dot">
13	</div>
14	</div>
15	<div class="mp-markers">
16	<span class="mp-m done">
17	</span>
18	<span class="mp-m done">
19	</span>
20	<span class="mp-m active">
21	</span>
22	<span class="mp-m">
23	</span>
24	<span class="mp-m">
25	</span>
26	</div>
27	</div>
28	</div>

preview

Numbered Circles

A simple numbered circle indicator with connecting lines, designed for compact inline use. Each number is always visible (no checkmarks), making it clear which step the user is on. The connecting lines transition color as steps complete.

numbered-circles

Live

untitled.html

HTML

1	<div class="nc-demo">
2	<div class="nc-step done">
3	<span>
4	1
5	</span>
6	</div>
7	<div class="nc-line done">
8	</div>
9	<div class="nc-step done">
10	<span>
11	2
12	</span>
13	</div>
14	<div class="nc-line done">
15	</div>
16	<div class="nc-step active">
17	<span>
18	3
19	</span>
20	</div>
21	<div class="nc-line">
22	</div>
23	<div class="nc-step">
24	<span>
25	4
26	</span>
27	</div>
28	<div class="nc-line">
29	</div>
30	<div class="nc-step">
31	<span>
32	5
33	</span>
34	</div>
35	</div>

preview

Compact Inline Stepper

A condensed stepper for tight spaces such as form headers, modals, or cards. It replaces labels with tooltips and uses smaller dots while keeping the connection line.

compact-stepper

Live

untitled.html

HTML

1	<div class="compact-stepper">
2	<div class="cs done" title="Upload">
3	<span>
4	</span>
5	</div>
6	<div class="cs-line done">
7	</div>
8	<div class="cs done" title="Process">
9	<span>
10	</span>
11	</div>
12	<div class="cs-line">
13	</div>
14	<div class="cs active" title="Verify">
15	<span>
16	</span>
17	</div>
18	<div class="cs-line">
19	</div>
20	<div class="cs" title="Done">
21	<span>
22	</span>
23	</div>
24	</div>

preview

Timeline Stepper

A content-rich vertical timeline for audit logs, activity feeds, or multi-phase project tracking. Each entry includes a timestamp, badge, and descriptive text.

timeline-stepper

Live

untitled.html

HTML

1	<div class="timeline">
2	<div class="tl done">
3	<div class="tl-badge done">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12">
5	<polyline points="20 6 9 17 4 12"/>
6	</svg>
7	</div>
8	<div class="tl-body">
9	<div class="tl-meta">
10	<span class="tl-title">
11	Deployment started
12	</span>
13	<span class="tl-time">
14	10:00 AM
15	</span>
16	</div>
17	<p>
18	Build v2.4.1 triggered from CI pipeline.
19	</p>
20	</div>
21	</div>
22	<div class="tl done">
23	<div class="tl-badge done">
24	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12">
25	<polyline points="20 6 9 17 4 12"/>
26	</svg>
27	</div>
28	<div class="tl-body">
29	<div class="tl-meta">
30	<span class="tl-title">
31	Tests passed
32	</span>
33	<span class="tl-time">
34	10:04 AM
35	</span>
36	</div>
37	<p>
38	347 unit tests and 12 integration tests passed.
39	</p>
40	</div>
41	</div>
42	<div class="tl active">
43	<div class="tl-badge active">
44	</div>
45	<div class="tl-body">
46	<div class="tl-meta">
47	<span class="tl-title">
48	Staging deploy
49	</span>
50	<span class="tl-time">
51	10:05 AM
52	</span>
53	</div>
54	<p>
55	Container pushed to staging cluster.
56	</p>
57	</div>
58	</div>
59	<div class="tl">
60	<div class="tl-badge">
61	</div>
62	<div class="tl-body">
63	<div class="tl-meta">
64	<span class="tl-title">
65	Production release
66	</span>
67	<span class="tl-time">
68	Pending
69	</span>
70	</div>
71	<p>
72	Waiting for final approval gate.
73	</p>
74	</div>
75	</div>
76	</div>

untitled.html

HTML

1	<div class="max-w-md mx-auto p-4 bg-[#0A0A0A]">
2	<div class="flex gap-3.5 relative">
3	<div class="absolute left-[11px] top-7 bottom-2 w-0.5 bg-[#00FF41] -z-0">
4	</div>
5	<div class="w-6 h-6 rounded-full flex items-center justify-center border-2 border-[#00FF41] bg-[#00FF41] text-[#0A0A0A] flex-shrink-0 z-10">
6	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12">
7	<polyline points="20 6 9 17 4 12"/>
8	</svg>
9	</div>
10	<div class="flex-1 pb-4">
11	<div class="flex justify-between items-center mb-0.5">
12	<span class="text-xs font-semibold text-[#808080]">
13	Deployment started
14	</span>
15	<span class="text-[10px] text-[#555555]">
16	10:00 AM
17	</span>
18	</div>
19	<p class="text-[11px] text-[#666666] leading-relaxed m-0">
20	Build v2.4.1 triggered from CI pipeline.
21	</p>
22	</div>
23	</div>
24	<div class="flex gap-3.5 relative">
25	<div class="absolute left-[11px] top-7 bottom-2 w-0.5 bg-[#00FF41] -z-0">
26	</div>
27	<div class="w-6 h-6 rounded-full flex items-center justify-center border-2 border-[#00FF41] bg-[#00FF41] text-[#0A0A0A] flex-shrink-0 z-10">
28	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12">
29	<polyline points="20 6 9 17 4 12"/>
30	</svg>
31	</div>
32	<div class="flex-1 pb-4">
33	<div class="flex justify-between items-center mb-0.5">
34	<span class="text-xs font-semibold text-[#808080]">
35	Tests passed
36	</span>
37	<span class="text-[10px] text-[#555555]">
38	10:04 AM
39	</span>
40	</div>
41	<p class="text-[11px] text-[#666666] leading-relaxed m-0">
42	347 unit tests and 12 integration tests passed.
43	</p>
44	</div>
45	</div>
46	<div class="flex gap-3.5 relative">
47	<div class="absolute left-[11px] top-7 bottom-2 w-0.5 bg-[#222222] -z-0">
48	</div>
49	<div class="w-6 h-6 rounded-full flex items-center justify-center border-2 border-[#00FF41] bg-[#0A0A0A] shadow-[0_0_10px_rgba(0,255,65,0.3)] flex-shrink-0 z-10">
50	</div>
51	<div class="flex-1 pb-4">
52	<div class="flex justify-between items-center mb-0.5">
53	<span class="text-xs font-semibold text-[#00FF41]">
54	Staging deploy
55	</span>
56	<span class="text-[10px] text-[#00FF41]">
57	10:05 AM
58	</span>
59	</div>
60	<p class="text-[11px] text-[#666666] leading-relaxed m-0">
61	Container pushed to staging cluster.
62	</p>
63	</div>
64	</div>
65	<div class="flex gap-3.5 relative">
66	<div class="w-6 h-6 rounded-full flex items-center justify-center border-2 border-[#333333] bg-[#0A0A0A] flex-shrink-0 z-10">
67	</div>
68	<div class="flex-1 pb-4">
69	<div class="flex justify-between items-center mb-0.5">
70	<span class="text-xs font-semibold text-[#E0E0E0]">
71	Production release
72	</span>
73	<span class="text-[10px] text-[#555555]">
74	Pending
75	</span>
76	</div>
77	<p class="text-[11px] text-[#666666] leading-relaxed m-0">
78	Waiting for final approval gate.
79	</p>
80	</div>
81	</div>
82	</div>

untitled.html

HTML

1	<div class="mx-auto p-3 bg-dark" style="max-width:380px">
2	<div class="d-flex gap-3 position-relative">
3	<div class="position-absolute" style="left:11px;top:28px;bottom:8px;width:2px;background:#00FF41;z-index:0">
4	</div>
5	<div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0" style="width:24px;height:24px;border:2px solid #00FF41;background:#00FF41;color:#0A0A0A;z-index:1">
6	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12">
7	<polyline points="20 6 9 17 4 12"/>
8	</svg>
9	</div>
10	<div class="flex-fill pb-3">
11	<div class="d-flex justify-content-between align-items-center mb-0">
12	<span style="font-size:12px;font-weight:600;color:#808080">
13	Deployment started
14	</span>
15	<span style="font-size:10px;color:#555">
16	10:00 AM
17	</span>
18	</div>
19	<p class="m-0 text-secondary" style="font-size:11px;line-height:1.5">
20	Build v2.4.1 triggered from CI pipeline.
21	</p>
22	</div>
23	</div>
24	<div class="d-flex gap-3 position-relative">
25	<div class="position-absolute" style="left:11px;top:28px;bottom:8px;width:2px;background:#00FF41;z-index:0">
26	</div>
27	<div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0" style="width:24px;height:24px;border:2px solid #00FF41;background:#00FF41;color:#0A0A0A;z-index:1">
28	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12">
29	<polyline points="20 6 9 17 4 12"/>
30	</svg>
31	</div>
32	<div class="flex-fill pb-3">
33	<div class="d-flex justify-content-between align-items-center mb-0">
34	<span style="font-size:12px;font-weight:600;color:#808080">
35	Tests passed
36	</span>
37	<span style="font-size:10px;color:#555">
38	10:04 AM
39	</span>
40	</div>
41	<p class="m-0 text-secondary" style="font-size:11px;line-height:1.5">
42	347 unit tests and 12 integration tests passed.
43	</p>
44	</div>
45	</div>
46	<div class="d-flex gap-3 position-relative">
47	<div class="position-absolute" style="left:11px;top:28px;bottom:8px;width:2px;background:#222;z-index:0">
48	</div>
49	<div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0" style="width:24px;height:24px;border:2px solid #00FF41;background:#0A0A0A;box-shadow:0 0 10px rgba(0,255,65,.3);z-index:1">
50	</div>
51	<div class="flex-fill pb-3">
52	<div class="d-flex justify-content-between align-items-center mb-0">
53	<span style="font-size:12px;font-weight:600;color:#00FF41">
54	Staging deploy
55	</span>
56	<span style="font-size:10px;color:#00FF41">
57	10:05 AM
58	</span>
59	</div>
60	<p class="m-0 text-secondary" style="font-size:11px;line-height:1.5">
61	Container pushed to staging cluster.
62	</p>
63	</div>
64	</div>
65	<div class="d-flex gap-3 position-relative">
66	<div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0" style="width:24px;height:24px;border:2px solid #333;background:#0A0A0A;z-index:1">
67	</div>
68	<div class="flex-fill pb-3">
69	<div class="d-flex justify-content-between align-items-center mb-0">
70	<span style="font-size:12px;font-weight:600;color:#E0E0E0">
71	Production release
72	</span>
73	<span style="font-size:10px;color:#555">
74	Pending
75	</span>
76	</div>
77	<p class="m-0 text-secondary" style="font-size:11px;line-height:1.5">
78	Waiting for final approval gate.
79	</p>
80	</div>
81	</div>
82	</div>

preview

Error & Warning States

Steps can display error or warning states to indicate validation failures. An error state uses red styling to draw attention, while the step remains clickable for the user to go back and fix the issue.

error-states

Live

untitled.html

HTML

1	<div class="err-stepper">
2	<div class="es done">
3	<div class="es-dot done">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="12" height="12">
5	<polyline points="20 6 9 17 4 12"/>
6	</svg>
7	</div>
8	<span class="es-label">
9	Personal
10	</span>
11	</div>
12	<div class="es-line done">
13	</div>
14	<div class="es error">
15	<div class="es-dot error">
16	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="12" height="12">
17	<line x1="18" y1="6" x2="6" y2="18"/>
18	<line x1="6" y1="6" x2="18" y2="18"/>
19	</svg>
20	</div>
21	<span class="es-label error">
22	Payment
23	</span>
24	</div>
25	<div class="es-line">
26	</div>
27	<div class="es">
28	<div class="es-dot">
29	3
30	</div>
31	<span class="es-label">
32	Confirm
33	</span>
34	</div>
35	</div>

untitled.html

HTML

1	<div class="d-flex align-items-center justify-content-center py-4 px-3 bg-dark">
2	<div class="d-flex flex-column align-items-center gap-1">
3	<div class="d-flex align-items-center justify-content-center rounded-circle fw-bold" style="width:28px;height:28px;font-size:11px;border:2px solid #00FF41;background:#00FF41;color:#0A0A0A">
4	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="12" height="12">
5	<polyline points="20 6 9 17 4 12"/>
6	</svg>
7	</div>
8	<span class="text-secondary" style="font-size:10px;font-weight:500">
9	Personal
10	</span>
11	</div>
12	<div class="flex-fill mx-n1 mb-3" style="height:2px;min-width:30px;max-width:60px;background:#00FF41">
13	</div>
14	<div class="d-flex flex-column align-items-center gap-1">
15	<div class="d-flex align-items-center justify-content-center rounded-circle fw-bold" style="width:28px;height:28px;font-size:11px;border:2px solid #EF4444;background:#EF4444;color:#fff;animation:errorPulse 2s infinite">
16	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="12" height="12">
17	<line x1="18" y1="6" x2="6" y2="18"/>
18	<line x1="6" y1="6" x2="18" y2="18"/>
19	</svg>
20	</div>
21	<span class="fw-semibold" style="font-size:10px;color:#EF4444">
22	Payment
23	</span>
24	</div>
25	<div class="flex-fill mx-n1 mb-3" style="height:2px;min-width:30px;max-width:60px;background:#222">
26	</div>
27	<div class="d-flex flex-column align-items-center gap-1">
28	<div class="d-flex align-items-center justify-content-center rounded-circle fw-bold" style="width:28px;height:28px;font-size:11px;border:2px solid #333;background:#0A0A0A;color:#555">
29	3
30	</div>
31	<span class="text-secondary" style="font-size:10px;font-weight:500">
32	Confirm
33	</span>
34	</div>
35	</div>
36	<style>
37	@keyframes errorPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
38	</style>

preview

CSS Transition Reference

Stepper transitions use CSS transitions on background-color, border-color, and box-shadow. The key is to transition the .done class toggling, which triggers smooth color changes on both the circle and connecting line.

stepper-transitions.css

CSS

1	/* Base step circle */
2	.step-circle {
3	width: 32px;
4	height: 32px;
5	border-radius: 50%;
6	border: 2px solid #333;
7	background: #0A0A0A;
8	color: #555;
9	transition: all 0.3s ease;
10	}
11
12	/* Completed state */
13	.step.done .step-circle {
14	background: #00FF41;
15	border-color: #00FF41;
16	color: #0A0A0A;
17	}
18
19	/* Active state with glow */
20	.step.active .step-circle {
21	border-color: #00FF41;
22	color: #00FF41;
23	box-shadow: 0 0 12px rgba(0, 255, 65, 0.3);
24	}
25
26	/* Connecting line */
27	.step-line {
28	height: 2px;
29	background: #222;
30	transition: background 0.3s ease;
31	}
32
33	.step-line.done {
34	background: #00FF41;
35	}

HTML Structure

A stepper uses an ordered list of step items, each containing an indicator (circle with number/check), label, and optional content. Connect adjacent steps with a line element and use aria-current="step" on the active step.

stepper-structure.html

HTML

1	<ol class="stepper" role="list">
2	<li class="step done" aria-current="false">
3	<div class="step-circle" aria-hidden="true">✓</div>
4	<span class="step-label">Account</span>
5	</li>
6	<li class="step-line" aria-hidden="true"></li>
7	<li class="step active" aria-current="step">
8	<div class="step-circle" aria-hidden="true">2</div>
9	<span class="step-label">Preferences</span>
10	</li>
11	<li class="step-line" aria-hidden="true"></li>
12	<li class="step" aria-current="false">
13	<div class="step-circle" aria-hidden="true">3</div>
14	<span class="step-label">Review</span>
15	</li>
16	</ol>

Accessibility

Steppers must communicate progress and state to all users. Do not rely on color alone to indicate completion or errors.

Use a real ordered list <ol> with role="list" so screen readers report the total number of steps.
Add aria-current="step" to the active step. Mark completed steps with aria-current="false".
Provide text alternatives for icon-only checkmarks, such as visually hidden text or aria-label="completed".
Announce step changes with an aria-live="polite" region in interactive wizards.
Ensure error states include an error message linked via aria-describedby.
Respect prefers-reduced-motion by disabling transition animations for users who need reduced motion.

⚠

warning

Long step labels break layout on small screens. Keep labels to two words or fewer, and use tooltips or progressive disclosure for additional context.

Best Practices

ℹ

info

Use aria-current="step" on the active step element so screen readers announce the current position. Mark completed steps with aria-current="false".

⚠

warning

Avoid step labels longer than two words. Long labels break the visual rhythm and create layout shifts on smaller screens. Use tooltips for additional context.

✓

best practice

Allow users to click on completed steps to go back and edit previous entries. Never trap users in a wizard \u2014 back navigation should always be available.

Keep total step count under 7 \u2014 Miller's Law. For longer processes, group related steps into phases or sub-wizards.
Show estimated time remaining alongside step count for long wizards (e.g., "Step 2 of 5 \u00b7 ~3 min left").
Validate each step before allowing progression. Highlight errors inline rather than blocking the entire step.
Use the prefers-reduced-motion query to disable step transition animations for sensitive users.
On mobile, convert horizontal steppers to vertical \u2014 horizontal layouts with 4+ steps overflow on small screens.

Community

Get help on Slack, Discord or VIP

Stuck on a guide? Join the community and ask.

Join Slack Join Discord Kaundal VIP

X GitHub YouTube Instagram Facebook Discord Slack Telegram Buy me a coffee Ko-fi Sponsor

1	.stepper {
2	display:flex;
3	align-items:center;
4	justify-content:center;
5	padding:24px 16px;
6	gap:0;
7	font-family:system-ui,
8	sans-serif
9	}
10	.step {
11	display:flex;
12	flex-direction:column;
13	align-items:center;
14	gap:6px;
15	position:relative;
16	z-index:1
17	}
18	.step-circle {
19	width:32px;
20	height:32px;
21	border-radius:50%;
22	display:flex;
23	align-items:center;
24	justify-content:center;
25	font-size:12px;
26	font-weight:700;
27	border:2px solid #333;
28	color:#555;
29	background:#0A0A0A;
30	transition:all .3s
31	}
32	.step.done .step-circle {
33	background:#00FF41;
34	border-color:#00FF41;
35	color:#0A0A0A
36	}
37	.step.active .step-circle {
38	border-color:#00FF41;
39	color:#00FF41;
40	box-shadow:0 0 12px rgba(0,
41	255,
42	65,
43	.3)
44	}
45	.step-label {
46	font-size:10px;
47	color:#666;
48	font-weight:500;
49	white-space:nowrap
50	}
51	.step.done .step-label {
52	color:#808080
53	}
54	.step.active .step-label {
55	color:#00FF41;
56	font-weight:600
57	}
58	.step-line {
59	flex:1;
60	height:2px;
61	background:#222;
62	min-width:40px;
63	max-width:80px;
64	margin:0 -4px;
65	margin-bottom:20px
66	}
67	.step-line.done {
68	background:#00FF41
69	}

1	.v-stepper {
2	max-width:340px;
3	margin:16px auto;
4	padding:16px;
5	font-family:system-ui,
6	sans-serif
7	}
8	.vs {
9	display:flex;
10	gap:12px
11	}
12	.vs-indicator {
13	display:flex;
14	flex-direction:column;
15	align-items:center;
16	flex-shrink:0
17	}
18	.vs-dot {
19	width:24px;
20	height:24px;
21	border-radius:50%;
22	display:flex;
23	align-items:center;
24	justify-content:center;
25	border:2px solid #333;
26	background:#0A0A0A;
27	flex-shrink:0;
28	transition:all .3s
29	}
30	.vs.done .vs-dot {
31	background:#00FF41;
32	border-color:#00FF41;
33	color:#0A0A0A
34	}
35	.vs.active .vs-dot {
36	border-color:#00FF41;
37	color:#00FF41;
38	box-shadow:0 0 10px rgba(0,
39	255,
40	65,
41	.3)
42	}
43	.vs-line {
44	width:2px;
45	flex:1;
46	background:#222;
47	margin:4px 0
48	}
49	.vs.done .vs-line {
50	background:#00FF41
51	}
52	.vs-body {
53	padding-bottom:20px;
54	flex:1
55	}
56	.vs-body h5 {
57	font-size:12px;
58	font-weight:600;
59	color:#E0E0E0;
60	margin:0 0 4px
61	}
62	.vs.done .vs-body h5 {
63	color:#808080
64	}
65	.vs-body p {
66	font-size:11px;
67	color:#666;
68	margin:0 0 4px;
69	line-height:1.5
70	}
71	.vs-time {
72	font-size:10px;
73	color:#555
74	}
75	.vs.active .vs-time {
76	color:#00FF41
77	}

1	.labeled-stepper {
2	display:flex;
3	align-items:center;
4	justify-content:center;
5	padding:32px 16px;
6	gap:0;
7	font-family:system-ui,
8	sans-serif
9	}
10	.ls {
11	display:flex;
12	align-items:center;
13	gap:10px;
14	opacity:.4;
15	transition:opacity .2s
16	}
17	.ls.done,
18	.ls.active {
19	opacity:1
20	}
21	.ls-icon {
22	width:36px;
23	height:36px;
24	border-radius:8px;
25	display:flex;
26	align-items:center;
27	justify-content:center;
28	border:2px solid #333;
29	color:#555;
30	background:#0A0A0A;
31	transition:all .3s
32	}
33	.ls.done .ls-icon {
34	background:#00FF41;
35	border-color:#00FF41;
36	color:#0A0A0A
37	}
38	.ls.active .ls-icon {
39	border-color:#00FF41;
40	color:#00FF41;
41	box-shadow:0 0 10px rgba(0,
42	255,
43	65,
44	.3)
45	}
46	.ls-info {
47	display:flex;
48	flex-direction:column;
49	gap:2px
50	}
51	.ls-title {
52	font-size:12px;
53	font-weight:600;
54	color:#E0E0E0
55	}
56	.ls.done .ls-title {
57	color:#808080
58	}
59	.ls.active .ls-title {
60	color:#00FF41
61	}
62	.ls-sub {
63	font-size:10px;
64	color:#555
65	}
66	.ls-conn {
67	width:32px;
68	height:2px;
69	background:#222;
70	margin:0 4px;
71	margin-bottom:16px
72	}
73	.ls-conn.done {
74	background:#00FF41
75	}

1	.mini-progress {
2	max-width:340px;
3	margin:16px auto;
4	padding:16px 20px;
5	background:#111;
6	border:1px solid #222;
7	border-radius:8px;
8	font-family:system-ui,
9	sans-serif
10	}
11	.mp-header {
12	display:flex;
13	justify-content:space-between;
14	margin-bottom:10px
15	}
16	.mp-title {
17	font-size:11px;
18	color:#808080;
19	font-weight:500
20	}
21	.mp-pct {
22	font-size:11px;
23	color:#00FF41;
24	font-weight:700;
25	font-variant-numeric:tabular-nums
26	}
27	.mp-track {
28	position:relative;
29	height:4px;
30	background:#1A1A2E;
31	border-radius:2px
32	}
33	.mp-fill {
34	position:absolute;
35	top:0;
36	left:0;
37	height:100%;
38	background:linear-gradient(90deg,
39	#00FF41,
40	#00CC33);
41	border-radius:2px;
42	transition:width .4s ease;
43	display:flex;
44	align-items:center;
45	justify-content:flex-end
46	}
47	.mp-dot {
48	width:10px;
49	height:10px;
50	border-radius:50%;
51	background:#00FF41;
52	border:2px solid #0A0A0A;
53	box-shadow:0 0 6px rgba(0,
54	255,
55	65,
56	.4);
57	position:relative;
58	right:-5px
59	}
60	.mp-markers {
61	position:absolute;
62	top:50%;
63	left:0;
64	right:0;
65	display:flex;
66	justify-content:space-between;
67	transform:translateY(-50%);
68	padding:0 2px
69	}
70	.mp-m {
71	width:6px;
72	height:6px;
73	border-radius:50%;
74	background:#333;
75	border:1.5px solid #0A0A0A;
76	z-index:1
77	}
78	.mp-m.done {
79	background:#00FF41
80	}
81	.mp-m.active {
82	background:#00FF41;
83	box-shadow:0 0 6px rgba(0,
84	255,
85	65,
86	.4)
87	}

1	<div class="max-w-sm mx-auto p-4 bg-[#111111] border border-[#222222] rounded-lg">
2	<div class="flex justify-between mb-2.5">
3	<span class="text-[11px] font-medium text-[#808080]">
4	Step 2 of 5
5	</span>
6	<span class="text-[11px] font-bold text-[#00FF41] tabular-nums">
7	40%
8	</span>
9	</div>
10	<div class="relative h-1 bg-[#1A1A2E] rounded">
11	<div class="absolute top-0 left-0 h-full bg-gradient-to-r from-[#00FF41] to-[#00CC33] rounded transition-all duration-400 flex items-center justify-end" style="width:40%">
12	<div class="w-2.5 h-2.5 rounded-full bg-[#00FF41] border-2 border-[#0A0A0A] shadow-[0_0_6px_rgba(0,255,65,0.4)] relative -right-1">
13	</div>
14	</div>
15	<div class="absolute top-1/2 left-0 right-0 -translate-y-1/2 flex justify-between px-0.5">
16	<span class="w-1.5 h-1.5 rounded-full bg-[#00FF41] border-[1.5px] border-[#0A0A0A] z-10">
17	</span>
18	<span class="w-1.5 h-1.5 rounded-full bg-[#00FF41] border-[1.5px] border-[#0A0A0A] z-10">
19	</span>
20	<span class="w-1.5 h-1.5 rounded-full bg-[#00FF41] border-[1.5px] border-[#0A0A0A] z-10 shadow-[0_0_6px_rgba(0,255,65,0.4)]">
21	</span>
22	<span class="w-1.5 h-1.5 rounded-full bg-[#333333] border-[1.5px] border-[#0A0A0A] z-10">
23	</span>
24	<span class="w-1.5 h-1.5 rounded-full bg-[#333333] border-[1.5px] border-[#0A0A0A] z-10">
25	</span>
26	</div>
27	</div>
28	</div>

1	<div class="mx-auto p-3 border border-secondary rounded" style="max-width:340px;background:#111">
2	<div class="d-flex justify-content-between mb-2">
3	<span class="text-secondary" style="font-size:11px;font-weight:500">
4	Step 2 of 5
5	</span>
6	<span style="font-size:11px;font-weight:700;color:#00FF41;font-variant-numeric:tabular-nums">
7	40%
8	</span>
9	</div>
10	<div class="position-relative rounded" style="height:4px;background:#1A1A2E">
11	<div class="position-absolute top-0 start-0 h-100 rounded d-flex align-items-center justify-content-end" style="width:40%;background:linear-gradient(90deg,#00FF41,#00CC33)">
12	<div class="rounded-circle" style="width:10px;height:10px;background:#00FF41;border:2px solid #0A0A0A;box-shadow:0 0 6px rgba(0,255,65,.4);position:relative;right:-5px">
13	</div>
14	</div>
15	<div class="position-absolute top-50 start-0 end-0 translate-middle-y d-flex justify-content-between px-1">
16	<span class="rounded-circle" style="width:6px;height:6px;background:#00FF41;border:1.5px solid #0A0A0A;z-index:1">
17	</span>
18	<span class="rounded-circle" style="width:6px;height:6px;background:#00FF41;border:1.5px solid #0A0A0A;z-index:1">
19	</span>
20	<span class="rounded-circle" style="width:6px;height:6px;background:#00FF41;border:1.5px solid #0A0A0A;z-index:1;box-shadow:0 0 6px rgba(0,255,65,.4)">
21	</span>
22	<span class="rounded-circle" style="width:6px;height:6px;background:#333;border:1.5px solid #0A0A0A;z-index:1">
23	</span>
24	<span class="rounded-circle" style="width:6px;height:6px;background:#333;border:1.5px solid #0A0A0A;z-index:1">
25	</span>
26	</div>
27	</div>
28	</div>

1	.nc-demo {
2	display:flex;
3	align-items:center;
4	justify-content:center;
5	gap:0;
6	padding:32px;
7	font-family:system-ui,
8	sans-serif
9	}
10	.nc-step {
11	width:28px;
12	height:28px;
13	border-radius:50%;
14	display:flex;
15	align-items:center;
16	justify-content:center;
17	font-size:11px;
18	font-weight:700;
19	border:2px solid #333;
20	color:#555;
21	background:#0A0A0A;
22	transition:all .3s;
23	flex-shrink:0
24	}
25	.nc-step.done {
26	background:#00FF41;
27	border-color:#00FF41;
28	color:#0A0A0A
29	}
30	.nc-step.active {
31	border-color:#00FF41;
32	color:#00FF41;
33	box-shadow:0 0 10px rgba(0,
34	255,
35	65,
36	.3)
37	}
38	.nc-line {
39	flex:1;
40	height:2px;
41	background:#222;
42	min-width:20px;
43	max-width:40px;
44	margin:0 -2px;
45	margin-bottom:14px
46	}
47	.nc-line.done {
48	background:#00FF41
49	}

1	<div class="flex items-center justify-center gap-0 py-8 bg-[#0A0A0A]">
2	<div class="w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-bold border-2 border-[#00FF41] bg-[#00FF41] text-[#0A0A0A] flex-shrink-0 transition-all">
3	1
4	</div>
5	<div class="flex-1 h-0.5 min-w-[20px] max-w-[40px] -mx-0.5 mb-3.5 bg-[#00FF41]">
6	</div>
7	<div class="w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-bold border-2 border-[#00FF41] bg-[#00FF41] text-[#0A0A0A] flex-shrink-0 transition-all">
8	2
9	</div>
10	<div class="flex-1 h-0.5 min-w-[20px] max-w-[40px] -mx-0.5 mb-3.5 bg-[#00FF41]">
11	</div>
12	<div class="w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-bold border-2 border-[#00FF41] bg-[#0A0A0A] text-[#00FF41] shadow-[0_0_10px_rgba(0,255,65,0.3)] flex-shrink-0 transition-all">
13	3
14	</div>
15	<div class="flex-1 h-0.5 min-w-[20px] max-w-[40px] -mx-0.5 mb-3.5 bg-[#222222]">
16	</div>
17	<div class="w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-bold border-2 border-[#333333] bg-[#0A0A0A] text-[#555555] flex-shrink-0 transition-all">
18	4
19	</div>
20	<div class="flex-1 h-0.5 min-w-[20px] max-w-[40px] -mx-0.5 mb-3.5 bg-[#222222]">
21	</div>
22	<div class="w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-bold border-2 border-[#333333] bg-[#0A0A0A] text-[#555555] flex-shrink-0 transition-all">
23	5
24	</div>
25	</div>

1	.compact-stepper {
2	display:flex;
3	align-items:center;
4	justify-content:center;
5	padding:28px 16px;
6	gap:0;
7	font-family:system-ui,
8	sans-serif
9	}
10	.cs {
11	position:relative;
12	width:14px;
13	height:14px;
14	border-radius:50%;
15	border:2px solid #333;
16	background:#0A0A0A;
17	cursor:pointer;
18	transition:all .3s
19	}
20	.cs.done {
21	background:#00FF41;
22	border-color:#00FF41
23	}
24	.cs.active {
25	border-color:#00FF41;
26	background:#0A0A0A;
27	box-shadow:0 0 0 4px rgba(0,
28	255,
29	65,
30	.15)
31	}
32	.cs span {
33	position:absolute;
34	bottom:20px;
35	left:50%;
36	transform:translateX(-50%);
37	font-size:9px;
38	color:#666;
39	white-space:nowrap;
40	opacity:.7
41	}
42	.cs.done span {
43	color:#808080
44	}
45	.cs.active span {
46	color:#00FF41;
47	font-weight:600;
48	opacity:1
49	}
50	.cs-line {
51	flex:1;
52	height:2px;
53	background:#222;
54	min-width:24px;
55	max-width:48px;
56	margin:0 6px
57	}
58	.cs-line.done {
59	background:#00FF41
60	}

1	<div class="flex items-center justify-center py-7 px-4 bg-[#0A0A0A]">
2	<div class="relative w-3.5 h-3.5 rounded-full border-2 border-[#00FF41] bg-[#00FF41] cursor-pointer transition-all" title="Upload">
3	<span class="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] text-[#808080] whitespace-nowrap opacity-70">
4	Upload
5	</span>
6	</div>
7	<div class="flex-1 h-0.5 min-w-[24px] max-w-[48px] mx-1.5 bg-[#00FF41]">
8	</div>
9	<div class="relative w-3.5 h-3.5 rounded-full border-2 border-[#00FF41] bg-[#00FF41] cursor-pointer transition-all" title="Process">
10	<span class="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] text-[#808080] whitespace-nowrap opacity-70">
11	Process
12	</span>
13	</div>
14	<div class="flex-1 h-0.5 min-w-[24px] max-w-[48px] mx-1.5 bg-[#222222]">
15	</div>
16	<div class="relative w-3.5 h-3.5 rounded-full border-2 border-[#00FF41] bg-[#0A0A0A] shadow-[0_0_0_4px_rgba(0,255,65,0.15)] cursor-pointer transition-all" title="Verify">
17	<span class="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] font-semibold text-[#00FF41] whitespace-nowrap">
18	Verify
19	</span>
20	</div>
21	<div class="flex-1 h-0.5 min-w-[24px] max-w-[48px] mx-1.5 bg-[#222222]">
22	</div>
23	<div class="relative w-3.5 h-3.5 rounded-full border-2 border-[#333333] bg-[#0A0A0A] cursor-pointer transition-all" title="Done">
24	<span class="absolute -top-5 left-1/2 -translate-x-1/2 text-[9px] text-[#666666] whitespace-nowrap opacity-70">
25	Done
26	</span>
27	</div>
28	</div>

1	<div class="d-flex align-items-center justify-content-center py-4 px-3 bg-dark">
2	<div class="position-relative rounded-circle" style="width:14px;height:14px;border:2px solid #00FF41;background:#00FF41;cursor:pointer" title="Upload">
3	<span class="position-absolute text-secondary text-nowrap" style="bottom:20px;left:50%;transform:translateX(-50%);font-size:9px;opacity:.7">
4	Upload
5	</span>
6	</div>
7	<div class="flex-fill mx-1" style="height:2px;min-width:24px;max-width:48px;background:#00FF41">
8	</div>
9	<div class="position-relative rounded-circle" style="width:14px;height:14px;border:2px solid #00FF41;background:#00FF41;cursor:pointer" title="Process">
10	<span class="position-absolute text-secondary text-nowrap" style="bottom:20px;left:50%;transform:translateX(-50%);font-size:9px;opacity:.7">
11	Process
12	</span>
13	</div>
14	<div class="flex-fill mx-1" style="height:2px;min-width:24px;max-width:48px;background:#222">
15	</div>
16	<div class="position-relative rounded-circle" style="width:14px;height:14px;border:2px solid #00FF41;background:#0A0A0A;box-shadow:0 0 0 4px rgba(0,255,65,.15);cursor:pointer" title="Verify">
17	<span class="position-absolute text-nowrap fw-semibold" style="bottom:20px;left:50%;transform:translateX(-50%);font-size:9px;color:#00FF41">
18	Verify
19	</span>
20	</div>
21	<div class="flex-fill mx-1" style="height:2px;min-width:24px;max-width:48px;background:#222">
22	</div>
23	<div class="position-relative rounded-circle" style="width:14px;height:14px;border:2px solid #333;background:#0A0A0A;cursor:pointer" title="Done">
24	<span class="position-absolute text-secondary text-nowrap" style="bottom:20px;left:50%;transform:translateX(-50%);font-size:9px;opacity:.7">
25	Done
26	</span>
27	</div>
28	</div>

1	.timeline {
2	max-width:380px;
3	margin:16px auto;
4	padding:16px;
5	font-family:system-ui,
6	sans-serif
7	}
8	.tl {
9	display:flex;
10	gap:14px;
11	position:relative
12	}
13	.tl::before {
14	content:"";
15	position:absolute;
16	left:11px;
17	top:28px;
18	bottom:-8px;
19	width:2px;
20	background:#222
21	}
22	.tl:last-child::before {
23	display:none
24	}
25	.tl.done::before {
26	background:#00FF41
27	}
28	.tl-badge {
29	width:24px;
30	height:24px;
31	border-radius:50%;
32	display:flex;
33	align-items:center;
34	justify-content:center;
35	border:2px solid #333;
36	background:#0A0A0A;
37	flex-shrink:0;
38	z-index:1
39	}
40	.tl-badge.done {
41	background:#00FF41;
42	border-color:#00FF41;
43	color:#0A0A0A
44	}
45	.tl-badge.active {
46	border-color:#00FF41;
47	background:#0A0A0A;
48	box-shadow:0 0 10px rgba(0,
49	255,
50	65,
51	.3)
52	}
53	.tl-body {
54	flex:1;
55	padding-bottom:18px
56	}
57	.tl-meta {
58	display:flex;
59	justify-content:space-between;
60	align-items:center;
61	margin-bottom:2px
62	}
63	.tl-title {
64	font-size:12px;
65	font-weight:600;
66	color:#E0E0E0
67	}
68	.tl.done .tl-title {
69	color:#808080
70	}
71	.tl.active .tl-title {
72	color:#00FF41
73	}
74	.tl-time {
75	font-size:10px;
76	color:#555
77	}
78	.tl.active .tl-time {
79	color:#00FF41
80	}
81	.tl-body p {
82	font-size:11px;
83	color:#666;
84	margin:0;
85	line-height:1.5
86	}

1	.err-stepper {
2	display:flex;
3	align-items:center;
4	justify-content:center;
5	padding:24px 16px;
6	gap:0;
7	font-family:system-ui,
8	sans-serif
9	}
10	.es {
11	display:flex;
12	flex-direction:column;
13	align-items:center;
14	gap:6px
15	}
16	.es-dot {
17	width:28px;
18	height:28px;
19	border-radius:50%;
20	display:flex;
21	align-items:center;
22	justify-content:center;
23	font-size:11px;
24	font-weight:700;
25	border:2px solid #333;
26	color:#555;
27	background:#0A0A0A;
28	transition:all .3s
29	}
30	.es-dot.done {
31	background:#00FF41;
32	border-color:#00FF41;
33	color:#0A0A0A
34	}
35	.es-dot.error {
36	background:#EF4444;
37	border-color:#EF4444;
38	color:#fff;
39	animation:errorPulse 2s infinite
40	}
41	.es-label {
42	font-size:10px;
43	color:#666;
44	font-weight:500
45	}
46	.es-label.error {
47	color:#EF4444;
48	font-weight:600
49	}
50	.es-line {
51	flex:1;
52	height:2px;
53	background:#222;
54	min-width:30px;
55	max-width:60px;
56	margin:0 -4px;
57	margin-bottom:16px
58	}
59	.es-line.done {
60	background:#00FF41
61	}
62	@keyframes errorPulse {
63	0%,
64	100% {
65	box-shadow:0 0 0 0 rgba(239,
66	68,
67	68,
68	.4)
69	}
70	50% {
71	box-shadow:0 0 0 8px rgba(239,
72	68,
73	68,
74	0)
75	}
76	}