Mohan Raj Mohan Raj - 1 year ago 71
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

for the tracker.

Thanks in advance.!

Answer Source

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.heading="Shipping Tracker";
    $scope.callAtInterval = function() {
       if($scope.progress_value <=100){
		$scope.progress_value = $scope.progress_value * 2;
		$scope.progress_value = 5;

    $interval( function(){ $scope.callAtInterval(); }, 3000);
.tracker {
<!DOCTYPE html>
<script src=""></script>
<body ng-app="progress_app" ng-controller="testCtrl">
		<h3 ng-bind='heading'> </h3><br/><br/>
		<progress value="{{progress_value}}" max="100" class="tracker">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download