Free Component
Multi-Step Form Progress Stepper
An interactive multi-step checkout/wizard stepper with active status indicators, completed checkmarks, and step transitions.
Colours in this gradient
#0f172a#3b82f6#10b981#ffffff
background: ;The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="stepper-stage">
<div class="stepper-card">
<div class="stepper-track">
<div class="step-node is-done" data-step="1">
<div class="step-circle">ā</div>
<div class="step-label">Account</div>
</div>
<div class="step-line is-done"></div>
<div class="step-node is-active" data-step="2">
<div class="step-circle">2</div>
<div class="step-label">Profile</div>
</div>
<div class="step-line"></div>
<div class="step-node" data-step="3">
<div class="step-circle">3</div>
<div class="step-label">Billing</div>
</div>
<div class="step-line"></div>
<div class="step-node" data-step="4">
<div class="step-circle">4</div>
<div class="step-label">Review</div>
</div>
</div>
<div class="stepper-content">
<h3 id="stepHeader">Step 2: Profile Information</h3>
<p id="stepDesc">Fill in your developer handle, primary coding language, and company role.</p>
</div>
<div class="stepper-footer">
<button class="s-btn btn-prev" id="stepPrevBtn">Previous</button>
<button class="s-btn btn-next" id="stepNextBtn">Continue →</button>
</div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create an interactive multi-step wizard stepper with active indicators in HTML, CSS and vanilla JavaScript. Requirements: - 4-step progress line connecting numbered circles. - Completed steps show green checkmark (ā) and green connector line. - Active step shows bright blue glowing background. - Next and Previous buttons that dynamically update current step and descriptive content. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Create flex track with step circles and connecting horizontal lines.
- 2
Apply state classes (.is-done, .is-active) dynamically via JavaScript.
- 3
Update copy and buttons on navigation button clicks.
Customisation tips
- Keep connecting lines inside flex layout with flex: 1 for equal spacing.