Angular - Bootstrap UI - Progress Bar

Angular - Bootstrap UI - Progress Bar.markdown

Angular - Bootstrap UI - Progress Bar

Angular UI progress bar directive with Count-to feature

Forked from Joe Watkins's Pen Angular - Bootstrap UI - Datepicker.

Forked from Joe Watkins's Pen Angular - Bootstrap UI - Datepicker.

A Pen by soussi on CodePen.

License.

index.html

<div ng-app="myApp" ng-controller="progressBar" class="container">
  
  <div class="page-header">
    <h1><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" width="50" height="50" /> Angular UI <small>Progress Bar</small></h1>
  </div>
  
  <progressbar class="progress-striped active" animate="true" max="100" value="progressValue" type="success"><i><span count-to="{{countTo}}" duration="1" count-from="{{countFrom}}"></span> / 100</i></progressbar>
  
</div>

script.js

var myApp = angular.module("myApp", ["ui.bootstrap","countTo"]);

myApp.controller("progressBar",function($scope,$timeout){
  
  var amt = 66;
  
  $scope.countTo = amt;
  $scope.countFrom = 0;
  
  $timeout(function(){
    $scope.progressValue = amt;
  }, 200);
  
});

// http://angular-ui.github.io/bootstrap/#/progressbar
// https://github.com/sparkalow/angular-count-to

scripts

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="http://sparkalow.github.io/angular-count-to/js/angular-count-to.js"></script>

style.css

.progress { 
  height: 3em;
  i { line-height: 3.5em; }
}

.progress-bar { 
  transition: width 1s ease-in-out; 
}

styles

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />