<!-- I missed the progress bar -->

<div class="container">
  <div class="circle active">1</div>
  <hr class="bar" />
  <div class="circle">2</div>
  <hr class="bar" />
  <div class="circle">3</div>
  <hr class="bar" />
  <div class="circle">4</div>
</div>

<div class="button-group">
  <button>Prev</button>

  <button>Next</button>
</div>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    background-color: #f6f7fb;
}

div.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    border: 5px solid grey;
    transition: border-color 0.3 ease;
}

div.circle.active {
    border-color: turquoise;
}

hr.bar {
    transform: rotate(90deg);
    width: 5px;
    background-color: grey;
    transition: background-color 0.3s ease; 
}

hr.bar.active {
    background-color: turquoise;
}

.container {
    display: flex;
    width: 300px;
    flex-direction: row;
    justify-content: center;
}

.button-group {
    width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 30px;
}

.button-group button {
    border: none;
    background-color: turquoise;
    color: white;
    cursor: pointer;
    padding: 10px 20px;
    box-shadow: 3px 3px 5px  rgba(0, 0, 0, 0.1);
}

.button-group button:active {
    transform: scale(0.9);
}

.button-group button:disabled {
    background-color: grey;
    color: white;
    cursor: not-allowed;
}
const circles = document.querySelectorAll(".circle");

const lines = document.querySelectorAll("hr.bar");

const [prevButton, nextButton] = document.querySelectorAll("button");

let active = 1;

function next() {
  active = Math.min(active + 1, circles.length);

  circles[active - 1].classList.add("active");
  lines[active - 2].classList.add("active");

  prevButton.disabled = false;

  if (active === 4) {
    nextButton.disabled = true;
  }
}

function prev() {
  active = Math.max(active - 1, 1);

  circles[active].classList.remove("active");

  lines[active - 1].classList.remove("active");

  nextButton.disabled = false;

  if (active === 1) {
    prevButton.disabled = true;
  }
}

nextButton.addEventListener("click", next);
prevButton.addEventListener("click", prev);

prevButton.disabled = true;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.