SOURCE

<div class="box">
	<div class="item active"><span>step 1</span></div>
  <div class="item active"><span>step 2</span></div>
	<div class="item"><span>step 3</span></div>
  <div class="item"><span>step 4</span></div>
</div>

* {
  box-sizing:border-box;
}
.box {
  display: flex;
  width: 100%;
  height: 50px;
  justify-content: space-between;
}
.item {
  flex: 1 1 auto;
  position: relative;
}
.item span {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: #ddd;
  border-radius: 100%;
  text-align: center;
  line-height:50px;
  color: #fff;
  z-index: 10;
  
  position:absolute;
  right: 0;
}
.item::before {
  content: '';
	position: absolute;
  width: 100%;
  height: 6px;
  background:#ddd;
  top:50%;
  transform:translateY(-50%);
}
.box .item:first-of-type {
  flex: 0 0 50px;
}
.item.active span{
  background-color:#11c2c2;
}
.item.active::before{
  background-color:#11c2c2;
}