AngularJS：如何製作波動的進度條？

Question

我想製作一個從0開始的進度條，並在一定時間內增加到最大值。當它達到最大值時，它會遞減並重復該過程。這是我的嘗試。

HTML：

<progressbar class="progress-striped active" 
      max="max" 
      value="value" 
      type="success"> 
</progressbar> 

JS：

app.controller('progressBar', function($scope,$timeout){ 
    $scope.max = 100; 
    $scope.min = 0; 
    $scope.value = 0; 

    var increment = 5; 
    var target = $scope.max; 

    $scope.increment = function() { 
     $scope.value += increment; 
    }; 

    $scope.decrement = function() { 
     $scope.value -= increment; 
    }; 

    $timeout(function() { 
     while ($scope.value <= target) { 
      $scope.increment(); 
      if($scope.value === target) { 
       target = $scope.min; 
      }; 
     }; 

     while ($scope.value >= target) { 
      $scope.decrement(); 
      if($scope.value === target) { 
       target = $scope.max; 
      }; 
     }; 
    }, 1000); 
}); 

Answer 1

angular.module("test", []).controller('testController', function($scope, $interval, $timeout) { 
 

 
    var min = 0, 
 
    max = 100; 
 
    var value = min; 
 
    $scope.myStyle = { 
 
    "width": "0%" 
 
    }; 
 
    var increment = 5; 
 

 
    function fluctuator() { 
 
    value += increment; 
 
    $scope.myStyle.width = value + "%"; 
 
    if (value > max || value < min) { 
 
     increment *= -1; 
 
     value += increment; 
 
    } 
 

 
    } 
 

 
    var interval = $interval(fluctuator, 200); 
 
    $timeout(function() { 
 
    $interval.cancel(interval); 
 
    alert("canceled to prevent infinite running of the interval.") 
 
    }, 10000) 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
< <div ng-app="test" ng-controller="testController"> 
 
    test page 
 
    <br/> 
 
    <div class="progress"> 
 
    <div class="progress-bar progress-bar-striped active" ng-style="myStyle"> 
 
    </div> 
 
    </div> 
 
    </div>

這裏是你可以用它來創建您的波動進度條的例子。 10秒後我停止動畫。