angular-progressbar | angular module for Progressbar-js

angular-progressbar module

angular-progressbar

Stars : 10

Forks : 10

Created by Felipe Campos Clarke

bower install angular-progressbar

Demo Download GitHub

angular-progressbar

Progressbar.js support for AngularJS http://kimmobrunfeldt.github.io/progressbar.js/

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.:

Javascript

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() {
        $scope.setLine();
        $scope.animateLine();
        console.log('update progress bar')
    }, 3000);
}]);

HTML

<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>
        </div>
    </div>
</body>

Fiddle coming soon...

Javscript

Javascript plugin

Angular-js