<div class="wizard-progress">
  <div class="step complete">
    Sourcing
    <div class="node"></div>
  </div>
  <div class="step complete">
    Grading
    <div class="node"></div>
  </div>
  <div class="step in-progress">
    Treatment
    <div class="node"></div>
  </div>
  <div class="step">
    Attributes
    <div class="node"></div>
  </div>
  <div class="step">
    Summary
    <div class="node"></div>
  </div>
</div>

$mainColor: #07c;
$baseColor: #fff;

body{
  background-color: black;
  font-family: sans-serif;
}

.wizard-progress{
  display: table;
  width: 100%;
  table-layout: fixed;
  position:relative;
  
  .step{
    display: table-cell;
    text-align: center;
    vertical-align: top;
    overflow: visible;
    position:relative;
    font-size: 14px;
    color: $baseColor;
    font-weight: bold;
    
    &:not(:last-child):before{
      content: '';
      display:block;
      position: absolute;
      left: 50%;
      top: 37px;
      background-color: $baseColor;
      height: 6px;
      width: 100%;
    }
    
    .node{
      display: inline-block;
      border: 6px solid $baseColor;
      background-color: $baseColor;
      border-radius: 18px;
      height: 18px;
      width: 18px;
      position: absolute;
      top: 25px;
      left: 50%;
      margin-left: -18px;
    }
    
    &.complete{
      &:before{
        background-color: $mainColor;
      }
      .node{
        border-color: $mainColor;
        background-color: $mainColor;
        
        &:before{
          font-family: FontAwesome;
          content: "\f00c";
        }
      }
    }
    
    &.in-progress{
      &:before{
        background: $mainColor;
        background: -moz-linear-gradient(left,  $mainColor 0%, $baseColor 100%);
        background: -webkit-linear-gradient(left,  $mainColor 0%, $baseColor 100%);
        background: linear-gradient(to right,  $mainColor 0%, $baseColor 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(     startColorstr='#{$mainColor}', endColorstr='#{$baseColor}',GradientType=1 );
      }
      .node{
        border-color: $mainColor;
      }
    }
  }
}