JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" integrity="sha512-DD6Lm09YDHzhW3K4eLJ9Y7sFrBwtCF+KuSWOLYFqKsZ6RX4ifCu9vWqM4R+Uy++aBWe6wD4csgQRzGKp5vP6tg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="wrapper-bar">

  <div class="step">
    <i class="fa fa-check"></i><div class="stepicon 1"><i class="fa fa-truck"></i></div>
    <span>Kostenloser Versand</span>
  </div>
  <div class="step">
        <div class="stepicon"><i class="fa fa-gift"></i></div>
    <span>5 EURO Gutscheinkarte</span>
  </div>
  <div class="step">
        <div class="stepicon"><i class="fa fa-gift"></i></div>
    <span>5 EURO Gutscheinkarte</span>
  </div>

  <div id="bar">
  </div>
  <!-- <div id="bar2">
  </div> -->
  <!-- <div id="bar3">
  </div> -->

</div>

<div id="btn">Start</div>

CSS

#bonusbar {
  border: 3px solid #f1f1f1;
  background-color: #f1f1f1;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 5px
}

#bonusbar>div {
  height:24px;
  background-color:#c7ef32;
  width: 0%;
  max-width: 100%;
  border-radius: 5px;
}

/*** TEST ***/

#wrapper-bar {
  width:100%;
  height:10px;
  background:#f1f1f1;
  border:2px solid #f1f1f1;
  display:flex;
 flex-direction:row;
 justify-content:space-around;
 align-items:center;
 margin-bottom:65px;
 position:relative;
 border-radius:3px;
 margin-top: 100px;
}

.step {
  width:25px;
  height:25px;
  border-radius:50%;
  border:3px solid white;
  background-color:#32C7EF;
  display:flex;
  justify-content:center;
  align-items: center;
  font-family: verdana;
  z-index:999;
}

.step > i {
  position: absolute;
  color:#fff;
  font-size: 12px;
}

.step span {
  font-size:13px;
  text-align:center;
  position:relative;
  text-transform: uppercase;
  top:30px;
  line-height: 14px;
}

.bar-green {
  background-color:#c7ef32!important;
}

.stepicon {
  width: 50px;
  height: 50px;
  background-color: #32C7EF;
  position: absolute;
  border-radius: 5px;
  top: -75px;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepicon:after {
  content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 0;
      border: 11px solid transparent;
      border-top-color: #32C7EF;
      border-bottom: 0;
      margin-left: -11px;
      margin-bottom: -10px;
}

.stepicon.change:after {
  border-top-color: #c7ef32;
}

.spin {
    -webkit-animation:spin 0.35s linear 2;
    /* -moz-animation:spin 0.35s linear 2;
    animation:spin 0.35s linear 2; */
}

@-moz-keyframes spin { 100% { -moz-transform: rotatey(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotatey(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotatey(360deg); transform:rotatey(360deg); } }

#bar {
  background-color:#c7ef32;
 ...

JavaScript

$('div#btn').on('click',function() {

  var startValue = '0';
  var maxValue = '65'; // = cv aus smarty
  var firstBonus = '16';
  //alert(maxValue);
  
  var interval = setInterval(function() {
  
  if (startValue < maxValue) {
  	startValue++;
    $("#bar").css( 'width',startValue + '%'  );
    
    if (startValue == firstBonus) {
    		$(".stepicon.1").addClass("spin bar-green change");
    }
  }

}, 50);
});