• HTML
• CSS
• JS

HTML

<div class="container">
    <div class="steps">
        <span class="circle active">1</span>
        <span class="circle">2</span>
        <span class="circle">3</span>
        <span class="circle">4</span>
        <div class="progress-bar">
            <span class="indicator"></span>
        </div>
    </div>
    <div class="buttons">
        <button id="prev" disabled>Prev</button>
        <button id="next">Next</button>
    </div>
</div>

CSS

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;
}
body{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f6f7fb;
}
.container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
    max-width:400px;
    width:100%;
}
.container .steps{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:space-between;
    position:relative;
}
.steps .circle{
    display:flex;
    align-items:center;
    justify-content:center;
    height:50px;
    width:50px;
    color:#999;
    font-size:22px;
    font-weight:500;
    border-radius:50%;
    background:#fff;
    border:4px solid #e0e0e0;
    transition:all 200ms ease;
    transition-delay:0;
}
.steps .circle.active{
    transition-delay:100ms;
    border-color:#4070f4;
    color:#4070f4;
}
.steps .progress-bar{
    position:absolute;
    height:4px;
    width:100%;
    background:#e0e0e0;
    z-index:-1;
}
.progress-bar .indicator{
    position:absolute;
    height:100%;
    width:0%;
    background:#4070f4;
    transition:all 300ms ease;
}
.container .buttons{
    display:flex;
    gap:20px;
}
.buttons button{
    padding:8px 25px;
    background:#4070f4;
    border:none;
    border-radius:8px;
    color:#fff;
    font-size:16px;
    font-weight:400;
    cursor:pointer;
    box-shadow:0 5px 10px rgba(0,0,0,0.05);
}
.buttons button:disabled{
    background:#87a5f8;
    cursor:not-allowed;
}

JS

//DOM Elements
const circles = document.querySelectorAll(".circle"),
 progressBar = document.querySelector(".indicator"),
 buttons = document.querySelectorAll("button");
 
 let currentStep = 1;

// function that update the current step and updates the DOM
const updateSteps = (e) => {
    // update current step based on the button clicked
    currentStep = e.target.id === "next" ? ++currentStep : --currentStep;
    
    // loop through all circle and add/remove "active" class based on their index and current step
    circles.forEach((circle,index) => {
        circle.classList[`${index < currentStep ? "add" : "remove"}`]("active");
    });
    
    // update progress bar width based on current step
    progressBar.style.width = `${((currentStep - 1) / (circles.length - 1)) * 100}%`
    
    // check if current step is last step or first step and disable corresponding buttons
    if(currentStep === circles.length){
        buttons[1].disabled = true;
    }else if(currentStep === 1){
        buttons[0].disabled = true;
    }else{
        buttons.forEach((button) => (button.disabled = false));
    }
};

// add click event listeners to all buttons
buttons.forEach((button) => {
    button.addEventListener("click",updateSteps);
});

/* All credits to: https://www.youtube.com/watch?v=xzaJGUtaWa0 */