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

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>

Solution

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>