<svg style="display:none">
  <defs>
    <symbol id="progress-step" viewBox="0 0 6 6">
      <circle cx="3" cy="3" r="2" />
    </symbol>
    <symbol id="progress-bar" viewBox="0 0 6 6" preserveAspectRatio="none">
      <rect height="3" width="6" y="1.5" x="0" stroke-width="4" />
    </symbol>
  </defs>
</svg>
<div class="widget-content" data-step="1">
  <div class="progress-borders">
    <svg class="progress-step">
      <use xlink:href="#progress-step"></use>
    </svg>
    <svg class="progress-step">
      <use xlink:href="#progress-step"></use>
    </svg>
    <svg class="progress-step">
      <use xlink:href="#progress-step"></use>
    </svg>
    <svg class="progress-step">
      <use xlink:href="#progress-step"></use>
    </svg>
  </div>

  <div class="progress-details">
    <svg class="progress-step progress-step1">
      <use xlink:href="#progress-step"></use>
    </svg>
    <svg class="progress-step progress-step2">
      <use xlink:href="#progress-step"></use>
    </svg>
    <svg class="progress-step progress-step3">
      <use xlink:href="#progress-step"></use>
    </svg>
    <svg class="progress-step progress-step4">
      <use xlink:href="#progress-step"></use>
    </svg>
  </div>

  <svg class="progress-empty-border">
    <use xlink:href="#progress-bar"></use>
  </svg>
  <svg class="progress-empty">
    <use xlink:href="#progress-bar"></use>
  </svg>
  <div class="progress-indicator-container">
    <svg class="progress-indicator">
      <use xlink:href="#progress-bar"></use>
    </svg>
  </div>
  <div class="progress-transit">
    <svg class="progress-step-transit-border">
      <use xlink:href="#progress-step"></use>
    </svg>
    <svg class="progress-step-transit">
      <use xlink:href="#progress-step"></use>
    </svg>
  </div>
  <svg class="progress-check" viewBox="0 0 30 30">
    <g transform="rotate(30 15 16)">
      <rect height="25" width="5" rx="3" ry="3" x="15" y="0" />
      <rect height="5" width="15" rx="3" ry="3" x="5" y="20" />
    </g>
  </svg>
</div>

<button class="next">Next</button>
<button class="prev">Prev</button>
$background: #333;
$border: #111;
$success-color: #1d9099;
$pending-color:lighten(desaturate($success-color, 30%), 40%);
body {
  background:$background;
  padding:0;
  margin:0;
}

.progress-details, .progress-borders {
  position:absolute;
  width:80%;
  left:10%;
  top:50%;
  height:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.progress-borders {
  z-index:1;
  .progress-step {
    stroke: $border;
  }
}

.progress-details {
  z-index:3;
  .progress-step {
    fill:$pending-color;
    &.active {
      fill:$success-color;
    }
  }
}    

.progress-step {
  height:60px;
  width:60px;
  display:block;
  border-radius:80px;
  z-index:2;
}

.progress-transit {
  position:absolute;
  top:50%;
  left:10%;
  width:80%;
  .progress-step-transit, .progress-step-transit-border {
    @extend .progress-step;
    position:absolute;
    top:50%;
    transform:translate(0, -50%);
    transition: left .5s ease-in-out;
  }

  .progress-step-transit {
    z-index:4;
    fill:$success-color
  }

  .progress-step-transit-border {
    z-index:1;
    stroke:$border;
  }
}


.progress-empty {
  position:absolute;
  width:calc(80% - 60px);
  left:calc(10% + 30px);
  height:20px;
  top: calc(50% - 10px);
  fill: $pending-color;
  z-index:2;
}

.progress-empty-border {
  @extend .progress-empty;
  stroke:$border;
  z-index:1;
}

svg.progress-check {
  height:60px;
  width:60px;
  position:absolute;
  top:50%;
  right:10%;
  transform: translate(0, -50%) scale(0);
  fill: $pending-color;
  z-index:4;
}

.progress-indicator-container{
  @extend .progress-empty;
  svg {
    fill:$success-color;
    height:100%;
    transition:width .5s ease-in-out;
  }
}
@mixin steps($step) {
  [data-step="#{$step}"] {         
    .progress-indicator-container svg { width: percentage(($step - 1) / 3) }
    @if $step > 1 {
      .progress-step-transit, .progress-step-transit-border { left: calc(#{percentage(($step - 1) / 3)} - #{($step - 1) * 20}px) }
    } @else {
      .progress-step-transit, .progress-step-transit-border { left: 0 }
    }
    @for $x from 1 through $step {
        svg.progress-step#{$x} { fill: $success-color; transition-delay: .5s; }
      }
  }
}

@include steps(1);
@include steps(2);
@include steps(3);
@include steps(4);

.next {
  position: absolute;
  right:0;
  bottom:0;
}

.prev {
  position:absolute;
  left:0;
  bottom:0;
}

@keyframes bounce {
    0%   { transform: translate(0, -50%) scale(0); }
    50%  {transform: translate(0, -50%) scale(1);}
    60%  {transform: translate(0, -50%) scale(.1);}
    70% {transform: translate(0, -50%) scale(.8);}
    80% {transform: translate(0, -50%) scale(.3);}
    90% {transform: translate(0, -50%) scale(.6);}
    100% {transform: translate(0, -50%) scale(.5);}
}

button {
  margin:30px;
  padding:10px 20px;
  cursor:pointer;
  color:$success-color;
  border:$border solid 4px;
  font-size:20px;
  font-weight:bold;
  background:$pending-color;
}
View Compiled
/*
This JavaScript is optional. It's just the method to modify the data-step attribute. 
*/

var currentStep = 1;

setStep();

$(".next").click(function() {
  if (currentStep < 4) {
    currentStep++;
    setStep();
  }
})

$(".prev").click(function() {
  if (currentStep > 1) {
    currentStep--;
    setStep();
  }
})

function setStep() {
  $(".widget-content").attr("data-step", currentStep);
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js