JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="testApp">
    <div ng-controller="testCtrl">
      <ul class="progress-rnd">
        <li>Step 1</li>
        <li>Step 2</li>
        <li>Step 3</li>
        <li>Step 4</li>
      </ul>
      
      <ul class="progress-rnd">
        <li ng-repeat="step in steps">
          {{step.name}}
        </li>
      </ul>
    </div>
</div>

CSS

.progress-rnd {
  text-align: justify;
  position: relative;
  overflow: hidden;
  margin: 0 40px;
  padding: 0px;
  z-index: 0;
}
.progress-rnd:before,
.progress-rnd .active:after {
  content: '';
  width: 100%;
  border: 2px solid dodgerblue;
  position: absolute;
  top: 3em;
  margin-top: -2px;
  z-index: -1;
}
.progress-rnd .active:after {
  border-color: lightblue;
}
.progress-rnd:after {
  content: "";
  display: inline-block;
  width: 100%;
}
.progress-rnd li {
  width: 6em;
  height: 6em;
  text-align: center;
  line-height: 6em;
  border-radius: 50%;
  background: dodgerblue;
  margin: 0;
  display: inline-block;
  color: white;
}
.progress-rnd .active ~ li {
  background: lightblue;
}
/* End Progress Circles */

JavaScript

var app = angular.module('testApp', []);

app.controller('testCtrl', function($scope) {
    $scope.steps = [
        { name: 'Step 1' },
        { name: 'Step 2' },
        { name: 'Step 3' },
        { name: 'Step 4' },
    ];
});