AngularJS Lucky number generator: How to add progress bar animation?

Question

I am new to angularjs. I have coded this Lucky number generator app that generates lucky number after 5 secs after clicking "Generate" button. I want to add a progress bar that completes in 5s duration and then displays result. Current progress bar just displays as soon as the page loads. How to avoid this?

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.show = true;
  
  $scope.$timeout = $timeout;
  
  $scope.generate = function() {
    var k = Math.floor(Math.random() * 10 + 1);
    if (k == $scope.userinput) {
      $scope.result = "Hooray! You won $10000!";
    } else {
      $scope.result = "Lucky number generated: " + k + "Try again!";
    }

  };
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>
  <style>
    #progressbar {
      height: 5px;
      width: 100%;
      background-color: red;
      animation-name: prgb;
      animation-duration: 5s;
    }
    
    @keyframes prgb {
      0% {
        width: 0%;
      }
      25% {
        width: 25%;
      }
      50% {
        width: 50%;
      }
      75% {
        width: 75%;
      }
      100% {
        width: 100%;
      }
    }
  </style>
  <div ng-app="myApp" ng-controller="myCtrl">
    Enter number between 0-10: <input type="text" ng-model="userinput">
    <button ng-click="$timeout(generate, 5000);">Generate</button><br><br>
    <div id="progressbar" ng-show="show" ng-initialize="show=false;"></div>
    <div>{{result}}</div>
  </div>
</body>

</html>

score 0 · Answer 1 · answered Oct 16 '17 at 14:12

The reason the bar is appearing straight away is because you're setting $scope.show to true as soon as the controller is loaded which is overwriting the ng-initialize on the progress bar.

Instead, remove ng-initialize="show=false;" and change $scope.show = true; to $scope.show = false;, this will stop the progress bar from showing on load.

After doing this however you'll notice your progress bar won't show at all, even after clicking the button. We need to set $scope.show = true; somewhere and fix the timeout whilst we're at it.

On your button element change ng-click="$timeout(generate, 5000);" to ng-click="generate()" and in your controller change your $scope.generate function to this:

$scope.generate = function()
{
    $scope.show = true;

    $timeout(function()
    {
        var k = Math.floor(Math.random() * 10 + 1);

        if (k == $scope.userinput) {
            $scope.result = "Hooray! You won $10000!";
        } else {
            $scope.result = "Lucky number generated: " + k + " Try again!";
        }
    }, 5000);
};

When the button is clicked this will first show the progress bar then trigger the timeout delay to run the rest of the logic.

Which should all result to something like this.

score 0 · Answer 2 · answered Oct 16 '17 at 14:22

0

Try a look to http://victorbjelkholm.github.io/ngProgress/ it's easy to implement and you can set timer if you want, otherwise it manages the loading bar automatically.

answered Oct 16 '17 at 14:22

Dody

608
7
19

score 0 · Accepted Answer · answered Oct 16 '17 at 15:48

Try angular material, which have all these progress bar as directives. I have created a code pen please have a look it may help

https://codepen.io/anon/pen/yzQypK?editors=1111

reference: https://material.angularjs.org/latest/demo/progressLinear

var app = angular.module('myApp', ['ngMaterial']);
app.controller('myCtrl', function($scope, $timeout, $interval) {
  $scope.show = true;

  $scope.$timeout = $timeout;

  $scope.determinateValue = 0;

  $scope.generate = function() {
    var k = Math.floor(Math.random() * 10 + 1);
    if (k == $scope.userinput) {
      $scope.result = "Hooray! You won $10000!";
    } else {
      $scope.result = "Lucky number generated: " + k + "Try again!";
    }

    $interval.cancel(progress);
    $scope.determinateValue = 100;
  };

  var progress;
  $scope.startProgress = function(){
    $scope.result="";
    $scope.determinateValue = -5;
    progress = $interval(function() {
      $scope.determinateValue += 2;
    }, 90);
  }  
});

HTML

<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">  
  <md-input-container>
    <label>Enter number between 0-10</label>
    <input ng-model="userinput">
  </md-input-container>  
  <md-button md-raised ng-click="$timeout(generate, 5000); startProgress();">Generate</md-button>
  <br>
  <br>
  <md-progress-linear md-mode="determinate" value="{{determinateValue}}"></md-progress-linear>
  <div>{{result}}</div>
</div>

AngularJS Lucky number generator: How to add progress bar animation?

3 Answers3