JSFiddle - React, Tailwind, and code Playground

by Jasper Stevens

HTML

<div id="container">
  <div class="step-wizard">
    <ul>
      <li class="">
        <a href="#" id="step1">
          <span class="step">1</span>
          <span class="title">Client Details</span>
        </a>
      </li>
      <li class="">
        <a href="#" id="step2">
          <span class="step">2</span>
          <span class="title">Brand Details</span>
        </a>
      </li>
      <li class="">
        <a href="#" id="step3">
          <span class="step">3</span>
          <span class="title">Shift Details</span>
        </a>
      </li>
      <li class="">
        <a href="#" id="step4">
          <span class="step">4</span>
          <span class="title">Confirmation</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="buttons">
    <button class="btn" id="prev">prev</button>
    <button class="btn" id="next">next</button>
  </div>
</div>

CSS

#container {
  position: relative;
  width: 100%;
  text-align: center;
}
.buttons {
  position: absolute;
  top: 180px;
  text-align: center;
  width: 100%;
}
.btn {
  width: 50px;
  height: 30px;
}
.step-wizard {
  display: inline-block;
  position: relative;
  width: 85%;
  .progress {
    position: absolute; 
    top: 43px;
    left: 12.5%;
    width: 75%;
  }
  .progressbar {
    position: absolute;
    background-color: #0aa89e;
    opacity: 0.4;
    height: 12px;
    border: 1px solid e5e6e6;
    width: 0%;
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
    &.empty {
      opacity: 1;
      width: 100%;
      background-color: #e5e6e6;
    }
  }
  ul {
    position: absolute;
    width: 100%;
    list-style-type: none;
    padding: 0;
    left: -2%
  }
  li {
    display: inline-block;
    text-align: center;
    width: 24.7%;
    & .step {
      position: absolute;
      display: inline-block;
      line-height: 30px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 4px solid;
      border-color: #e5e6e6;
      background: #ffffff;
      -webkit-transition: background-color 0.6s ease, border-color 0.6s ease;
      -o-transition: background-color 0.6s ease, border-color 0.6s ease;
      transition: background-color 0.6s ease, border-color 0.6s ease; 
    }
    & .title {
      position: absolute;
      width: 100%;
      left: 20px;
      padding-top: 42px;
      color: #969c9c;
      -webkit-transition: color 0.6s ease;
      -o-transition: color 0.6s ease;
      transition: color 0.6s ease; 
    }
    &.active {
      .step {
        border-color: #0aa89e;
      }
      .title {
        color: black;
      }
    }   
    &.done .step {
      color: white;
      background-color: #0aa89e;
      border-color: #0aa89e;
    }  
    & > a {
      display: block;
      width: 100%;
      color: black;
      position: relative;
      text-align: center; 
      &:hover...

JavaScript

$(document).ready(function() {
  function setClasses(index, steps) {
    if (index < 0 || index > steps) return;
    if(index == 0) {
      $("#prev").prop('disabled', true);
    } else {
      $("#prev").prop('disabled', false);
    }
    if(index == steps) {
      $("#next").text('einde');
    } else {
      $("#next").text('next');
    }
    $("ul li").each(function() {
      $(this).removeClass();
    });
    $("ul li:lt(" + index + ")").each(function() {
      $(this).addClass("done");
    });
    $("ul li:eq(" + index + ")").addClass("active")
    var p = index * (100 / steps);
    $("#prog").width(p + '%');
  }
  $(".step-wizard ul a").click(function() {
    var step = $(this).find("span.step")[0].innerText;
    var steps = $(".step-wizard ul li").length;
    setClasses(step - 1, steps - 1)
  });
  $("#prev").click(function(){
    var step = $(".step-wizard ul li.active span.step")[0].innerText;
    var steps = $(".step-wizard ul li").length;    
    setClasses(step - 2, steps - 1);
  });
  $("#next").click(function(){
    if ($(this).text() == 'done') {
      
    } else {
      var step = $(".step-wizard ul li.active span.step")[0].innerText;
      var steps = $(".step-wizard ul li").length;    
      setClasses(step, steps - 1);
    }
  });
  
  // initial state setup
  setClasses(0, $(".step-wizard ul li").length);
});