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 秒后停止動畫。