JSFiddle - React, Tailwind, and code Playground

Ubigreen step process

by Zonedark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl">
  <div class="trame">

    <div style="display: table-cell; vertical-align: middle;" ng-repeat="step in Steps">
      <div class="roundbutton" ng-class="{RoundEnabled:$index < CurrentStep, RoundDisabled:$index >= CurrentStep}">
        <span ng-show="$index >= (CurrentStep-1)">
          {{step.Index}}
        </span>

        <i ng-show="$index < (CurrentStep -1)" class="fa fa-check"></i>

      </div>

      <div class="steplabel" ng-class="{LabelEnabled:$index < CurrentStep, LabelDisabled:$index >= CurrentStep}">
        {{step.Name}}
      </div>
      <div class="stepseparator" ng-show="$last == false">

      </div>
    </div>
  </div>
  <div>
  <button ng-click="Previous()">
    Previous
  </button>
  <button ng-click="Next()">
    Next
  </button>
  </div>
</div>

CSS

.trame {
  display: table;
  height: 100px;
  overflow: hidden;
  -moz-box-shadow: 0px 0px 5px 1px #656565;
-webkit-box-shadow: 0px 0px 5px 1px #656565;
-o-box-shadow: 0px 0px 5px 1px #656565;
box-shadow: 0px 0px 5px 1px #656565;
    margin:10px 10px 10px 10px ;
    padding: 10px;
}

.roundbutton {
  width: 40px;
  height: 40px;
  float: left;
  border-radius: 50%;
  display: block;
  margin-top: -10px;
  text-align: center;
  padding-top: 8px;
  color: white;
  font-weight: bold;
}

.stepseparator {
  border-bottom: solid 1px black;
  width: 40px;
  height: 10px;
  float: left;
  display: block;
  vertical-align: none;
  margin-left: 8px;
  margin-right: 20px;
}

.steplabel {
  margin-left: 8px;
  float: left;
  display: block;
}

.LabelEnabled {
  font-weight: bold;
  color: black;
}

.LabelDisabled {
  font-weight: normal;
  color: rgb(222, 222, 222);
}

.RoundEnabled {
  border: solid 1px rgb(66, 133, 244);
  background-color: rgb(66, 133, 244);
}

.RoundDisabled {
  border: solid 1px rgb(185, 185, 185);
  background-color: rgb(185, 185, 185);
}

JavaScript

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

myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.name = "Angular";
  $scope.Steps = [{
    Index: "1",
    Name: "One"
  }, {
    Index: "2",
    Name: "Two"
  }, {
    Index: "3",
    Name: "Three"
  }, {
    Index: "4",
    Name: "Four"
  }, {
    Index: "5",
    Name: "Five"
  }, {
    Index: "6",
    Name: "Test"
  } ];

  $scope.CurrentStep = 5;
  
  $scope.Previous = function(){
  	if($scope.CurrentStep > 0)
    $scope.CurrentStep = $scope.CurrentStep - 1;
  };
  
  $scope.Next = function(){
  	if($scope.CurrentStep < $scope.Steps.length)
    $scope.CurrentStep = $scope.CurrentStep + 1;
  };
}]);