Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Default Progress Bars

Progressbars are created with the directive progressbar and setting the type attribute.

Primary with type="primary".

Info with type="info".

Success with type="success".

Warning with type="warning".

Danger with type="danger".

Inverse with type="inverse".

Striped Progress Bars

Sriped Progress bars made with CSS3 gradients, just add the progress-striped class

Note Does not work with browsers that do not support CSS3 gradients or animations, like IE9

Info

Inverse

Stacking progressbars

You can stack one progressbar on top of another simply by wrapping <bar> elements inside a <progress> element

Progressbars can be created with the progressbar HTML element. These examples show how to create regular and stacked progressbars.

<progressbar class="progress-sm" value="23" type="danger"></progressbar>

<progress class="progress-striped active progress-sm">
	<bar value="40" type="success"></bar>
	<bar value="20" type="warning"></bar>
	<bar value="20" type="danger"></bar>
</progress>

Dynamic

No animation Object (changes type based on value)

Stacked

<h4>Dynamic <button class="btn btn-sm btn-primary" type="button" ng-click="random()">Randomize</button></h4>
<progressbar max="max" value="dynamic"><span>{{dynamic}} / {{max}}</span></progressbar>

<small><em>No animation</em></small>
<progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>

<small><em>Object (changes type based on value)</em></small>
<progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></progressbar>

<hr />
<h4>Stacked <button class="btn btn-sm btn-primary" type="button" ng-click="randomStacked()">Randomize</button></h4>
<progress><bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></bar></progress>

$scope.random = function() {
  var value = Math.floor((Math.random() * 100) + 1);
  var type;

  if (value < 25) {
    type = 'success';
  } else if (value < 50) {
    type = 'info';
  } else if (value < 75) {
    type = 'warning';
  } else {
    type = 'danger';
  }

  $scope.showWarning = (type === 'danger' || type === 'warning');

  $scope.dynamic = value;
  $scope.type = type;
};
$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 < n; i++) {
      var index = Math.floor((Math.random() * 4));
      $scope.stacked.push({
        value: Math.floor((Math.random() * 30) + 1),
        type: types[index]
      });
  }
};
$scope.randomStacked();