<form id="progress" action="" class="progressbar">
  <input type="radio" id="step-1" value="steps" name="steps" class="progressbar__radio" checked>
  <label for="step-1" class="progressbar__label">Step 1</label>
  <input type="radio" id="step-2" value="steps" name="steps" class="progressbar__radio">
  <label for="step-2" class="progressbar__label">Step 2</label>
  <input type="radio" id="step-3" value="steps" name="steps" class="progressbar__radio">
  <label for="step-3" class="progressbar__label">Step 3</label>
  <input type="radio" id="step-4" value="steps" name="steps" class="progressbar__radio">
  <label for="step-4" class="progressbar__label">Step 4</label>
  <input type="radio" id="step-5" value="steps" name="steps" class="progressbar__radio">
  <label for="step-5" class="progressbar__label">Step 5</label>
</form>

$highlight: #4286f4;
$lowlight: #aaa;
html,
body{
  background: white;
  font-family: Arial, sans-serif;
  height: 100%;
  width: 100%;
}
.progressbar{
  background: transparent;
  box-sizing: border-box;
  display: table;
  height: 6em;
  overflow: hidden;
  padding: 1em 0;
  position: relative;
  width: 100%;
  &::before{
    border: 1px solid $lowlight;
    content: "";
    display: block;
    position: absolute;
    top: 4em;
    width: 100%;
  }
  &__radio{
    display: none;
    &:checked + label ~ label{
      color: $lowlight;
      &::before{
        background: white;
        border-color: $lowlight;
      }
      &::after{
        background: $lowlight;
      }
    }
  }
  &__label{
    color: $highlight;
    display: table-cell;
    font-weight: bold;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    &::before{
      background: $highlight;
      border-radius: 50%;
      border: 2px solid $highlight;
      bottom: calc((100% - 4em) - 2px);
      content: "";
      display: block;
      height: 2em;
      left: calc((50% - 1em) - 2px);
      position: absolute;
      width: 2em;
      z-index: 9;
    }
    &::after{
      background: $highlight;
      content: "";
      display: block;
      height: 2px;
      position: absolute;
      right: 50%;
      top: 3em;
      width: 100%;
    }
    &:last-of-type::after{
      right: 0;
      width: 150%;
    }
  }
}