Mohan Raj Mohan Raj - 4 months ago 11
AngularJS Question

what is the better way to create the dynamic shipment tracker through Angular JS

Shipment Tracker

Am trying to create shipment tracker in Angular with HTML5 & CSS3. Can anyone advise how to create the above shipment tracker dynamically through Angular JS.

For now i have planned to start with

ng-animate
for the tracker.

Thanks in advance.!

Answer

After a long search.. i tried to use HTML Progress Bar for my tracking.

We can update the value of the progress based on your shipping status. For now i have use $interval which updates the progress for every three second.

var app = angular.module("progress_app", []);
	app.controller('testCtrl',function($scope, $interval){
	$scope.progress_value=5;

	$scope.heading="Shipping Tracker";
    $scope.callAtInterval = function() {
       if($scope.progress_value <=100){
		$scope.progress_value = $scope.progress_value * 2;
	   }else{
		$scope.progress_value = 5;
	   }
	   
    }

    $interval( function(){ $scope.callAtInterval(); }, 3000);
	});
.tracker {
		 width:80%
	}
<!DOCTYPE html>
<html>
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="progress_app" ng-controller="testCtrl">
		<h3 ng-bind='heading'> </h3><br/><br/>
		<progress value="{{progress_value}}" max="100" class="tracker">
		</progress>
</body>
</html>