JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li ng-repeat="item in items" ng-class="{'completed':$index<active, 'incomplete':$index>active,'active':$index==active}">{{item}}</li>
</ul>

<button ng-click="nxtClicked()">Next</button>
<button ng-click="bckClicked()">Back</button>

CSS

ul{
  margin 0;
  padding: 0;
  display:flex;
  justify-content:space-between;
}

li{
  border-bottom:5px solid;
  list-style:none;
  text-align:center;
  /* width:90px; */
}

li.completed{
  border-color:green;
  
}
li.incomplete{
  border-color:#ddd;
}

li.active{
  border-color:red;
}

JavaScript

var app = angular.module('testApp',[]);
app.controller('testController', function($scope){

$scope.items = ['stage-1','stage-2','stage-3','stage-4','stage-5','stage-6']
$scope.active = 0;

$scope.nxtClicked = function(){
	if($scope.active  < $scope.items.length-1){
  $scope.active++;
  }

}

$scope.bckClicked = function(){
if($scope.active > 0){
  $scope.active--;
  }
}

})