Let’s create a Step Indicator using HTML, CSS, and JavaScript. This project will display multiple steps in a progress bar format, with each step highlighted as users progress through a series of actions.
We’ll use HTML to structure the steps, CSS for styling the progress bar and steps, and JavaScript to handle the interactions that allow users to move through each step dynamically.
Let’s dive into building the Step Indicator. Whether you’re a beginner or an experienced developer, this project offers a great way to practice your web development skills while creating a practical and interactive interface. Let’s create a smooth and stylish step indicator!
HTML :
This HTML structure creates a form with a step indicator component, consisting of 5 steps (“About You,” “About Book,” “Review,” “Signing,” and “Contract”). Each step is visually represented by a numbered circle, and connectors between the steps show the progression. Below the steps, there are “Previous” and “Next” buttons, with the “Previous” button initially disabled.
The step indicator layout is controlled by external CSS (style.css), which will manage the visual transitions and button interactions. The script.js will handle the functionality, such as enabling or disabling buttons and updating the step visuals as users navigate through the form.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Step Indicator</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'><link rel="stylesheet" href="./style.css">
</head>
<body>
<form>
<div class="steps">
<div class="steps__step" data-step="0">
<div class="steps__step-number">1</div>
<div class="steps__step-name">About You</div>
</div>
<div class="steps__connector"></div>
<div class="steps__step" data-step="1">
<div class="steps__step-number">2</div>
<div class="steps__step-name">About Book</div>
</div>
<div class="steps__connector"></div>
<div class="steps__step" data-step="2">
<div class="steps__step-number">3</div>
<div class="steps__step-name">Review</div>
</div>
<div class="steps__connector"></div>
<div class="steps__step" data-step="3">
<div class="steps__step-number">4</div>
<div class="steps__step-name">Signing</div>
</div>
<div class="steps__connector"></div>
<div class="steps__step" data-step="4">
<div class="steps__step-number">5</div>
<div class="steps__step-name">Contract</div>
</div>
</div>
<div class="btn-group">
<button class="btn" type="button" data-action="prev" disabled>Previous</button>
<button class="btn" type="button" data-action="next">Next</button>
</div>
</form>
<script src="./script.js"></script>
</body>
</html>
CSS :
This CSS sets up the styling for a responsive form and step indicator component. It uses variables for colors (--bg, --fg, --primary) and animations (--trans-dur, --trans-timing) to make the design adaptable and smooth. The StepIndicator layout changes based on the form’s width, thanks to the @container query, and it adapts to dark mode via @media (prefers-color-scheme: dark). Buttons and steps are styled with transitions, hover effects, and conditional states like disabled. The steps also visually reflect progression using numbered circles and connectors.
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
--primary: hsl(var(--hue),90%,30%);
--trans-dur: 0.3s;
--trans-timing: cubic-bezier(0.65,0,0.35,1);
font-size: calc(16px + (48 - 16) * (100vw - 280px) / (3840 - 280));
}
body,
button {
font: 1em/1.5 "DM Sans", sans-serif;
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
height: 100vh;
}
form {
container: form/inline-size;
margin: auto;
padding: 1.5em;
width: 100%;
max-width: 36em;
}
.btn {
background-color: var(--primary);
border-radius: 0.25em;
color: white;
cursor: pointer;
display: block;
padding: 0.375em 0.75em;
transition: background-color var(--trans-dur) var(--trans-timing), opacity var(--trans-dur) var(--trans-timing);
width: 100%;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
.btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn:not(:disabled):hover {
background: hsl(var(--hue), 90%, 10%);
}
.btn-group {
display: flex;
justify-content: center;
gap: 0.75em;
margin-top: 1.5em;
}
.steps {
background-color: white;
border-radius: 0.75em;
display: flex;
padding: 1.5em;
flex-direction: column;
justify-content: center;
width: 100%;
}
.steps__connector, .steps__step {
position: relative;
}
.steps__connector {
background-color: hsl(var(--hue), 10%, 80%);
margin-inline-start: 0.75em;
width: 0.125em;
height: 1.25em;
transform: translateX(-50%);
transition: background-color var(--trans-dur);
}
.steps__connector:before {
background-color: var(--primary);
content: "";
display: block;
width: 100%;
height: 100%;
transform: scale(1, 0);
transform-origin: 50% 0;
transition: background-color var(--trans-dur), transform var(--trans-dur) var(--trans-timing);
}
.steps__step {
display: flex;
align-items: center;
flex-shrink: 0;
z-index: 1;
}
.steps__step-name {
color: hsl(var(--hue), 10%, 50%);
font-size: 0.75em;
line-height: 2;
transition: color var(--trans-dur) var(--trans-timing), font-weight var(--trans-dur) var(--trans-timing);
}
.steps__step-number {
background-color: hsl(var(--hue), 10%, 80%);
color: white;
border-radius: 50%;
margin-inline-end: 0.5em;
text-align: center;
width: 1.5em;
height: 1.5em;
transition: background-color var(--trans-dur) var(--trans-timing), box-shadow var(--trans-dur) var(--trans-timing);
}
.steps__step--current .steps__step-name, .steps__step--done .steps__step-name {
color: hsl(var(--hue), 10%, 10%);
font-weight: 700;
}
.steps__step--current .steps__step-number, .steps__step--done .steps__step-number {
background-color: var(--primary);
}
.steps__step--current .steps__step-number, .steps__step--current .steps__step-name {
transition-delay: var(--trans-dur);
}
.steps__step--current .steps__step-number {
box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 30%, 0.4);
}
.steps__step--done + .steps__connector:before {
transform: scale(1, 1);
}
/* Change layout depending on form width */
@container form (min-width: 30em) {
.btn {
width: auto;
}
.steps {
flex-direction: row;
align-items: center;
padding: 1.5em 2.25em 2.25em 2.25em;
}
.steps__connector {
margin-inline-start: 0;
width: 100%;
height: 0.125em;
transform: translateY(-50%);
}
.steps__connector:before {
transform: scale(0, 1);
transform-origin: 0 50%;
}
[dir=rtl] .steps__connector:before {
transform-origin: 100% 50%;
}
.steps__step-name {
position: absolute;
top: 100%;
left: 50%;
text-align: center;
width: 6em;
transform: translateX(-50%);
}
.steps__step-number {
margin-inline-end: 0;
}
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,10%);
--fg: hsl(var(--hue),10%,90%);
--primary: hsl(var(--hue),90%,70%);
}
.btn {
color: hsl(var(--hue), 10%, 10%);
}
.btn:not(:disabled):hover {
background: hsl(var(--hue), 90%, 50%);
}
.steps {
background-color: hsl(var(--hue), 10%, 20%);
}
.steps__connector {
background-color: hsl(var(--hue), 10%, 40%);
}
.steps__step-name {
color: hsl(var(--hue), 10%, 50%);
}
.steps__step-number {
background-color: hsl(var(--hue), 10%, 40%);
color: hsl(var(--hue), 10%, 20%);
}
.steps__step--current .steps__step-name, .steps__step--done .steps__step-name {
color: hsl(var(--hue), 10%, 90%);
}
.steps__step--current .steps__step-number {
box-shadow: 0 0 0 0.125em hsla(var(--hue), 90%, 70%, 0.4);
}
}
JavaScript:
This code defines a StepIndicator class that controls the display and navigation of a step-based interface (like a multi-step form). When the page loads, it initializes the step indicator based on a CSS selector. It listens for click events on buttons that have data-action attributes set to “prev” or “next” to navigate between steps. The class manages updating the step display, enabling or disabling buttons at the first or last step, and visually marking completed or current steps.
"use strict";
window.addEventListener("DOMContentLoaded", () => {
const steps = new StepIndicator(".steps");
});
class StepIndicator {
/**
* @param el CSS selector of the step indicator element
*/
constructor(el) {
/** Number of steps */
this.steps = 5;
this._step = 0;
this.el = document.querySelector(el);
document.addEventListener("click", this.clickAction.bind(this));
this.displayStep(this.step);
this.checkExtremes();
}
get step() {
return this._step;
}
set step(value) {
this.displayStep(value);
this._step = value;
this.checkExtremes();
}
/**
* @param e Click event
*/
clickAction(e) {
const button = e.target;
const actionName = button === null || button === void 0 ? void 0 : button.getAttribute("data-action");
if (actionName === "prev") {
this.prev();
}
else if (actionName === "next") {
this.next();
}
}
/** Go to the previous step. */
prev() {
if (this.step > 0) {
--this.step;
}
}
/** Go to the next step. */
next() {
if (this.step < this.steps - 1) {
++this.step;
}
}
/** Disable the Previous or Next button if hitting the first or last step. */
checkExtremes() {
const prevBtnEl = document.querySelector(`[data-action="prev"]`);
const nextBtnEl = document.querySelector(`[data-action="next"]`);
if (prevBtnEl) {
prevBtnEl.disabled = this.step <= 0;
}
if (nextBtnEl) {
nextBtnEl.disabled = this.step >= this.steps - 1;
}
}
/**
* Update the indicator for a targeted step.
* @param targetStep Index of the step
*/
displayStep(targetStep) {
var _a;
const current = "steps__step--current";
const done = "steps__step--done";
for (let s = 0; s < this.steps; ++s) {
const stepEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-step="${s}"]`);
stepEl === null || stepEl === void 0 ? void 0 : stepEl.classList.remove(current, done);
if (s < targetStep) {
stepEl === null || stepEl === void 0 ? void 0 : stepEl.classList.add(done);
}
else if (s === targetStep) {
stepEl === null || stepEl === void 0 ? void 0 : stepEl.classList.add(current);
}
}
}
}
In conclusion, creating a Step Indicator using HTML, CSS, and JavaScript has been a practical and enjoyable project. By combining HTML for structure, CSS for styling, and JavaScript for interactivity, we’ve built a functional and dynamic progress indicator that enhances user experience in step-based processes.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
