title: Progressbar in angular
body: <p>I want to make Progressbar in Angular.js in decimal format, simple format, times based Progressbar. Someone could pls help !</p>
  
  <p>E.g.<br>
  Start Timer {{ counter }}/{{ max }} = {{ (counter/max)*100 }}%<br>
  Start Timer 20/30 = 66.66666666666666%  </p>
  
  <p>Here is <code>example.js</code>:</p>
  
  <pre><code>angular.module('plunker', ['ui.bootstrap']);
  
  var ProgressDemoCtrl = function ($scope) {
      $scope.max = 200;
      $scope.random = function () {
          var value = Math.floor((Math.random() * 100) + 1);
          var type;
  
          if (value &lt; 25) {
              type = 'success';
          } else if (value &lt; 50) {
              type = 'info';
          } else if (value &lt; 75) {
              type = 'warning';
          } else {
              type = 'danger';
          }
  
          $scope.showWarning = (type === 'danger' || type === 'warning');
          $scope.dynamic = value;
          $scope.type = type;
      };
  
  var app = angular.module('plunker', ['ui.bootstrap']);
  
  app.controller('ProgressDemoCtrl', function ($scope) {
      $scope.value = 40;
      $scope.state = "progress-bar-success";
      $scope.myStyle = {width: $scope.value + '%'};
  });
  
  $scope.random();
  
  $scope.randomStacked = function() { $scope.stacked = [];
  
  var types = ['success', 'info', 'warning', 'danger']; for (var i = 0, n = Math.floor((Math.random() * 4) + 1); i &lt; n; i++) { var index = Math.floor((Math.random() * 4));
  
  $scope.stacked.push({ value: Math.floor((Math.random() * 30) + 1),
  
  type: types[index] }); } }; $scope.randomStacked(); };
  
  var app = angular.module('progressApp',['nprogress']); var MainCtrl = function($scope,ngProgress){ }
  </code></pre>