<ul class="cdt-step-progressbar">
  <li>
    <span class="indicator">1</span>
    <span class="title">Initiate</span>
    <div class="content">This is even great and nice depending on what you want</div>
  </li>
  <li>
    <span class="indicator">2</span>
    <span class="title">Buy item 1</span>
    <div class="content">This is another sub-title</div>
  </li>
  <li>
    <span class="indicator">3</span>
    <span class="title">Finally make it</span>
  </li>
  <li>
    <span class="indicator">4</span>
    <span class="title">In production</span>
  </li>
  <li>
    <span class="indicator">5</span>
    <span class="title">Delivery</span>
  </li>
</ul>
.cdt-step-progressbar {
  position: absolute;
  top: 50%;
  left: 20%;
  width: 95%;
  transform: translate(-20%, -50%);
  width: 50%;
}
var myStepProgressBar = new Kodhus.StepProgressBar();
myStepProgressBar.init({});
myStepProgressBar.setActiveIndex(1);