Unlimited CSS Step bar with Laravel Blade, SASS and FontAwesome

steps.blade.php

<div class="progress">
    @foreach ($steps as $step)
        <div class="{{ $step[0] }}
            {{ $loop->iteration > $currentStep ? '' : 'progress__step--active' }}
            {{ $loop->iteration >= $currentStep ? '' : 'progress__step--done' }}">
            {{ $step[1] }}
        </div>
    @endforeach
</div>

steps.scss

.progress {
  display: flex;

  &__step {
    flex: 1;
    text-align: center;
    position: relative;
    &:before {
      display: flex;
      font-family: "FontAwesome";
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: .75rem;
      background: white;
      color: #adb5bd;
      border: 4px solid #e9ecef;
      border-radius: 50%;
    }

    &:after {
      width: 100%;
      height: 4px;
      content: '';
      position: absolute;
      background-color: #e9ecef;
      top: 18px;
      left: -50%;
      z-index: -1;
    }

    &:first-child:after {
      content: none;
    }

    &--active {
      &:before {
        border-color: green;
      }

      &:after {
        background: green;
      }
    }
    &--done {
      &:before {
        content: '\f00c';
        color: white;
        background: green;
        border-color: green;
      }
    }
  }
}

usage.blade.php

@component('steps')
    @slot('steps', [
        ['fa-building-o', 'Company details'],
        ['fa-edit', 'Job details'],
        ['fa-file-text-o', 'Preview'],
        ['fa-credit-card', 'Checkout']
    ])
    @slot('currentStep', 1)
@endcomponent

Checkout the CodePen https://codepen.io/IsraelOrtuno/pen/MvPMgz