stepped_progressbar_css_only

 .stepped-progress-bar {
	 counter-reset: step;
	 padding: 0;
	/*/
	/ Applies to everything after the selected stage*/
	/*/
	/ Applies to the selected stage*/
}
 .stepped-progress-bar > li {
	/*Applies to everything before the selected stage*/
	 display: inline-block;
	 list-style-type: none;
	 width: 16.6666666667%;
	 float: left;
	 font-size: 0.8rem;
	 position: relative;
	 text-align: center;
	 text-transform: uppercase;
	 color: #55b776;
}
 .stepped-progress-bar > li::before {
	 width: 3rem;
	 height: 3rem;
	 font-size: 1.8em;
	 font-family: FontAwesome;
	 content: "\f00c";
	 counter-increment: step;
	 border: 0.3rem solid #55b776;
	 display: block;
	 text-align: center;
	 margin: 0 auto 1rem auto;
	 border-radius: 50%;
	 background-color: #55b776;
	 color: white;
	 position: relative;
	 z-index: 300;
}
 .stepped-progress-bar > li::after {
	 width: 100%;
	 height: 0.2rem;
	 content: '';
	 position: absolute;
	 background-color: #55b776;
	 top: 1.5rem;
	 left: -50%;
	 z-index: 200;
}
 .stepped-progress-bar > li:first-child::after {
	 display: none;
}
 .stepped-progress-bar > li.active ~ li {
	 color: #7d7d7d;
}
 .stepped-progress-bar > li.active ~ li::after {
	 background-color: #dfdfdf;
}
 .stepped-progress-bar > li.active ~ li::before {
	 background-color: #dfdfdf;
	 border-color: #dfdfdf;
	 color: #7d7d7d;
	 line-height: 2.5rem;
	 font-size: 1.2rem;
	 content: counter(step);
}
 .stepped-progress-bar > li.active::before {
	 background-color: white;
	 color: #55b776;
	 border-color: #55b776;
	 line-height: 2.5rem;
	 font-size: 2rem;
	 content: '\f0d7';
}
 .stepped-progress-bar > li.active {
	 color: #7d7d7d;
}
         
  <div class="col-md-12">
      <div class="container-fluid">
        <div class="row">
          <div class="d-none d-md-block col-xl-10 offset-xl-1 pb-5">
            <div class="card">
              <div class="card-body">
                <ul class="stepped-progress-bar">
                  <li>Property Selection</li>
                  <li>Development Type</li>
                  <li class='active'>Development Stage</li>
                  <li>Proposed Development</li>
                  <li>Units of Demand</li>
                  <li>Results</li>          
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div> 
    </div>