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

$cat docs/steppers-&-wizards.md

updated Recently·14 min read·published

Steppers & Wizards

◆CSS◆HTML◆UI◆Intermediate🎯Free Tools

Step indicators that visualize progress through a multi-step process \u2014 from simple numbered progress bars to full wizard interfaces with form validation and back/next navigation.

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 effect, 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>

preview

Interactive Wizard

A fully interactive wizard with back/next navigation. Each step displays different content, and the step indicator updates to reflect the current position. The final step changes the Next button to a green 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:8px;
157	padding:16px 20px;
158	border-top:1px solid #222;
159	justify-content:flex-end
160	}
161	.w-btn {
162	padding:8px 18px;
163	border-radius:6px;
164	font-size:12px;
165	font-weight:600;
166	font-family:system-ui,
167	sans-serif;
168	cursor:pointer;
169	border:none;
170	transition:all .2s
171	}
172	.w-btn.primary {
173	background:#00FF41;
174	color:#0A0A0A
175	}
176	.w-btn.primary:hover {
177	background:#00E63A
178	}
179	.w-btn.secondary {
180	background:transparent;
181	color:#808080;
182	border:1px solid #333
183	}
184	.w-btn.secondary:hover {
185	color:#E0E0E0;
186	border-color:#555
187	}
188	.w-btn:disabled {
189	opacity:.35;
190	cursor:not-allowed
191	}
192	@keyframes fadeUp {
193	from {
194	opacity:0;
195	transform:translateY(8px)
196	}
197	to {
198	opacity:1;
199	transform:translateY(0)
200	}
201	}

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>

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>

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

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>

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>

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.

X GitHub YouTube Instagram Facebook Discord Telegram Buy me a coffee 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	.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	.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	}