var app = angular.module('progressdemo', ['progress.bar']);
app.controller('MainCtrl', function($scope) {
$scope.timer_running = false;
$scope.max_count = 25;
$scope.startProgress = function() {
$scope.timer_running = true;
}
$scope.stopProgress = function() {
$scope.timer_running = false;
}
});
<!DOCTYPE html>
<html ng-app="progressdemo">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.1.1" data-require="bootstrap-css@3.1.1" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js" data-require="angular.js@1.2.x"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" data-semver="3.1.1" data-require="bootstrap@*"></script>
<script src="progressBar.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="jumbotron">
<div class="row">
<div class="col-lg-6">
<h3>Progress Bar Demo</h3>
<!--ng-progressbar directive -->
<ng-progressbar type="info" max="{{max_count}}" start="{{timer_running}}" on-stop="stopProgress()"></ng-progressbar>
</div>
<button class="btn btn-success" ng-if="!timer_running" ng-click="startProgress()">Start Timer</button>
<button class="btn btn-warning" ng-if="timer_running" ng-click="stopProgress()">Stop Timer</button>
</div>
<div class="row">
<br />
<span class="label label-success" ng-if="timer_running">Timer Running</span>
<span class="label label-danger" ng-if="!timer_running">Timer Stopped</span>
</div>
</div>
</body>
</html>
/* Put your css in here */
'use strict';
angular.module('progress.bar', [])
.directive('ngProgressbar', function($timeout) {
return {
restrict : 'E',
template : "<div class='progress'><div class='progress-bar progress-bar-{{type}}' role='progressbar' style='width:{{percent_complete}}%;'>{{current}} / {{max}} seconds</div></div>",
replace : true,
scope: {
max: '@',
start: '@',
type: '@',
onStop: '&'
},
controller : ['$scope', '$timeout', function($scope, $timeout) {
$scope.onTimeout = function() {
$scope.startAt++;
$scope.current = $scope.startAt;
$scope.mytimeout = $timeout($scope.onTimeout,1000);
if($scope.startAt >= $scope.max) {
$scope.stop();
$scope.onStop();
}
$scope.percent_complete = Number(100 * $scope.current / $scope.max);
}
$scope.stop = function() {
$timeout.cancel($scope.mytimeout);
}
}],
link : function (scope, elem, attrs, ctrl) {
attrs.$observe('start', function(value) {
console.log('observe start change');
if(value === 'true') {
scope.startAt = 0;
scope.mytimeout = $timeout(scope.onTimeout,1000);
}else if(value ==='false') {
scope.stop();
}
});
}
}
});
ng-progressbar
=========
A simple bootstrap-progressbar directive for angularJS. Requires Bootstrap 3.
The timer will count in seconds from 0 to to the maximum number of seconds given, and the progress bar will increase based on percentage progress of the timer towards that maximum value with a text inlay.
###Progress Bar Demo Screenshot###
Usage
--------------
- include "progressBar.js" script in your html
- add 'progress.bar' as a dependency in app.js
```sh
var app = angular.module('progressdemo', ['progress.bar']);
```
#####Using the directive#####
```sh
<ng-progressbar type="success" max="{{max_count}}" start="{{timer_running}}" on-stop="stopProgress()"></ng-progressbar>
```
- 'type' is the bootstrap alert class (info, warning, success, danger)
- 'max' is the maximum value that the timer will reach in seconds
```sh
$scope.max_count = 11;
```
- 'start' is a boolean attribute which must be set from the controller scope : e.g. :
```sh
$scope.timer_running = false;
```
- 'on-stop' is a callback function which will fire when the timer reaches the max.
- To stop the timer : The 'start' attribute is being observed, so in your controller, just set the relevant scope variable to false. Your callback function might look like this :
```sh
$scope.stopProgress = function() {
$scope.timer_running = false;
}
```
- To start the timer : The 'start' attribute is being observed, so in your controller, just set the relevant scope variable to true. e.g. :
```sh
$scope.startProgress = function() {
$scope.timer_running = true;
}
```