JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<div ng-controller="testCtrl">
   <progress-bar isComplete="isComplete"></progress-bar>
</div>



<script type="text/ng-template" id="test1.html">
<div class="progress-bar-track">
  	<div class="progress-bar-marker" ng-style="{'width':width+'%'}"> 
    {{width}}
    </div>
  </div> 
</script>

CSS

.progress-bar-track{
  height:40px;
  width:400px;
  background:#ddd;
  padding:5px;
}



.progress-bar-marker{
  height:40px;
  background:rgba(190,0,0,0.2);
}

JavaScript

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

	$scope.isComplete = false;
  
  $timeout(function(){
  	$scope.isComplete = true;
    //alert("completed");
  },30000)
  
});


app.directive('progressBar',function(){

	return{
					restrict:'E',
          templateUrl:"test1.html",
          link : function(scope, element, attr){
           	scope.isComplete = attr.isComplete
       },
          controller:function($interval, $scope){
          $scope.width = 0;
          var breakpointReached = false;
          console.log($scope.isComplete);
          var trackProgress = $interval(function(){
              if($scope.isComplete){
              	if($scope.width < 100 && ($scope.width + 5) <= 99){
                		$scope.width = $scope.width + 5; 
                    console.log($scope.width)
                }
              	else if($scope.width >= 99){
                		console.log($scope.width)
                    $scope.width = 100;
                   // alert("process cancelled");
                    $interval.cancel(trackProgress)
                }
              }
             else if(!$scope.isComplete){
									if($scope.width + 1 > 80){
                    breakpointReached = true;
                  }
                  
                  if(breakpointReached){
                  	if($scope.width > 60){
                  	$scope.width = $scope.width - 1;
                    }
                    else{
                   	 $scope.width = $scope.width + 1;
                      breakpointReached = false;
                    }
                  }
                  else{
                  $scope.width = $scope.width + 1;
                  }
              		
              }
             
              
              
            },200)
          }

	}

})