Progressbar.js support for AngularJS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist First Version Oct 28, 2014
.gitignore First Version Oct 28, 2014 First Version Oct 28, 2014
Gruntfile.js First Version Oct 28, 2014 Update May 4, 2016
angular-progressbar.js First Version Oct 28, 2014
bower.json First Version Oct 28, 2014
package.json First Version Oct 28, 2014


Progressbar.js support for AngularJS

Setup JavaScript

So far this is what I have found. On JavaScript, add the module as a dependency:

angular.module('demo', ['angularProgressbar']);

Setup HTML

On HTML, add the corresponding directive tag e.g.:

<!-- element form works -->
<pb-line progress-key="myLine"></pb-line>
<pb-circle progress-key="myCircle"></pb-circle>
<pb-square progress-key="mySquare"></pb-square>
<pb-path progress-key="myPath"></pb-path>
<!-- attribute form works too -->
<div pb-circle progress-key="myCircleDiv"></div>
<!-- I believe all forms work -->

The progress-key parameter is required

Passing options to directive

So far, to pass options you do the flowing, on the controller set a variable in the $scope to use as the options. In my case I named it options so I set $scope.options. You can set, say, $scope.circleOptions if you wish.

angular.module('demo', ['angularProgressbar'])
.controller('demoCtrl', ['$scope', '$pbService',  
				function( $scope,   $pbService ){
	$scope.options = {
		color: '#FCB03C',
		duration: 3000,
		easing: 'easeInOut'};
	$scope.circleOptions = {
		color: '#FCBB33',
		duration: 2000,
		easing: 'easeInOut'};

In the HTML you add an attribute called options and you put the scope variable as the value.

<pb-line progress-key="myLine" options="options"></pb-line>
<!--  or, if your variable is called 'lineOptions' in your scope then -->\
<pb-circle progress-key="myLine" options="circleOptions"></pb-circle>

animate, set, or stop

Turns out that you can handle the animate, set or stop through the controller, e.g.:


angular.module('demo', ['angularProgressbar'])
.controller('demoCtrl', ['$scope', '$pbService', '$timeout',  
				function( $scope,   $pbService,   $timeout ){
	$scope.options = {
		color: '#FCB03C',
		duration: 3000,
		easing: 'easeInOut'
	$scope.lineProgress = 0;

	$scope.animateLine = function(){
		$scope.lineProgress = $scope.lineProgress + .05; 
		$pbService.animate('myLine', $scope.lineProgress, $scope.options);
	$scope.setLine = function(){ 
		$scope.lineProgress = $scope.lineProgress + .05; 
		$pbService.set('myCircle', $scope.lineProgress);
	$timeout(function() {
        console.log('update progress bar')
    }, 3000);


<body ng-app="demo" ng-controller="demoCtrl">
    <div class="container">
        <h2>angular-progressbar.js samples</h2>
        <button ng-click="animateLine()">animate line to +5%s</button>
        <button ng-click="setLine()">set line to +5%s</button> Current progress value: {{lineProgress}}
        <div class="width">
<pb-line progress-key="myLine" options='options'></pb-line>
<pb-circle progress-key="myCircle"></pb-circle>

Fiddle coming soon...