<div class="cr-wrap" ng-app="ui.bootstrap.demo">
<div class="cr-content" ng-controller="ProgressDemoCtrl">
<h3>Static</h3>
<div class="row">
<div class="col-sm-4"><uib-progressbar value="55"></uib-progressbar></div>
<div class="col-sm-4"><uib-progressbar class="progress-striped" value="22" type="warning">22%</uib-progressbar></div>
<div class="col-sm-4"><uib-progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></uib-progressbar></div>
</div>
<hr />
<h3>Dynamic <button type="button" class="btn btn-sm btn-primary" ng-click="random()">Randomize</button></h3>
<uib-progressbar max="max" value="dynamic"><span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span></uib-progressbar>
<small><em>No animation</em></small>
<uib-progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></uib-progressbar>
<small><em>Object (changes type based on value)</em></small>
<uib-progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></uib-progressbar>
<hr />
<h3>Stacked <button type="button" class="btn btn-sm btn-primary" ng-click="randomStacked()">Randomize</button></h3>
<uib-progress><uib-bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></uib-bar></uib-progress>
</div>
</div>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ProgressDemoCtrl', function ($scope) {
$scope.max = 200;
$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();
});