A CSS-only progress bar for steps can be created using HTML and CSS. Here is an example:

<div class="progress-container">
<div class="step active">Step 1</div>
<div class="step">Step 2</div>
<div class="step">Step 3</div>
</div>

.progress-container {
display: flex;
}

.step {
width: 33.33%;
text-align: center;
background-color: #ddd;
border: 1px solid #fff;
border-right: none;
box-sizing: border-box;
padding: 10px 0;
position: relative;
}

.step:last-child {
border-right: 1px solid #fff;
}

.step::before {
content: "";
height: 5px;
width: 100%;
background-color: #fff;
position: absolute;
top: 10px;
left: 0;
z-index: -1;
}

.step.active {
background-color: #337ab7;
color: #fff;
}

.step.active::before {
background-color: #337ab7;
}

This creates a progress bar with 3 steps, and the current step is highlighted with a blue background color. You can adjust the number of steps, colors, and styles as needed.

Here are the steps to create a step bar in HTML:

1. Create an HTML file and add the following structure:

<div id="progress-container">
<div id="progress"></div>
<div class="circle" id="circle-1"></div>
<div class="circle" id="circle-2"></div>
<!-- Add more circles as needed -->
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

2. Add the following CSS to style the step bar:

#progress-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 20px 0;
}

#progress {
height: 4px;
width: 0;
background-color: #333;
}

.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
display: inline-block;
}

.active {
background-color: #333;
}

3. Add JavaScript code to control the step bar behavior:

const progress = document.getElementById("progress");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const circles = document.querySelectorAll(".circle");
let currentActive = 1;

next.addEventListener("click", () => {
currentActive++;
if (currentActive > circles.length) currentActive = circles.length;
update();
});

prev.addEventListener("click", () => {
currentActive--;
if (currentActive < 1) currentActive = 1;
update();
});

const update = () => {
circles.forEach((circle, index) => {
if (index < currentActive) circle.classList.add("active");
else circle.classList.remove("active");
});
const actives = document.querySelectorAll(".active");
progress.style.width =
((actives.length - 1) / (circles.length - 1)) * 100 + "%";
if (currentActive === 1) prev.disabled = true;
else if (currentActive === circles.length) next.disabled = true;
else {
prev.disabled = false;
next.disabled = false;
}
};

Here’s an example of a responsive step progress bar using HTML and CSS:

<div class="step-progress">
<div class="step-progress-bar">
<div class="step-progress-line"></div>
</div>
<div class="step-progress-step">
<div class="step-progress-step-item active">Step 1</div>
<div class="step-progress-step-item">Step 2</div>
<div class="step-progress-step-item">Step 3</div>
</div>
</div>

.step-progress {
display: flex;
justify-content: center;
align-items: center;
margin: 50px 0;
}

.step-progress-bar {
width: 100%;
height: 8px;
background: #ccc;
border-radius: 4px;
position: relative;
overflow: hidden;
}

.step-progress-line {
height: 100%;
background: #333;
width: 33.33%;
position: absolute;
left: 0;
top: 0;
transition: width 0.3s ease;
}

.step-progress-step {
display: flex;
margin-left: 50px;
}

.step-progress-step-item {
font-size: 14px;
color: #333;
margin-right: 50px;
position: relative;
}

.step-progress-step-item:after {
content: "";
width: 20px;
height: 20px;
border: 2px solid #333;
border-radius: 50%;
background: #fff;
position: absolute;
left: -35px;
top: -10px;
z-index: 1;
}

.step-progress-step-item.active {
color: #fff;
}

.step-progress-step-item.active:after {
border-color: #fff;
}