Add progress bar component

[bekos]

I have created a directive for progress bars based on twitter's bootstrap component.

I wanted to be a wrapper for bootstrap's html with value binding, animation changes and support for stacked bars.

It is still has bugs but i made an early plnkr to see if you are interested in this. See here: http://plnkr.co/edit/FDi7IHEcD4VjuJ7wWwzK?p=preview

@angular-ui I will appreciate your opinion on this, and if it is OK for this project, i can prepare a PR.

[petebacondarwin]

Hi Tasos,
This has some nice features. I think it is worth a PR.
I am a little concerned about how the configuration works. I wonder if the
options for a progress (bar) should be more explicit. For instance:

.directive('progressbar', ['$transition', function($transition) {
return {
restrict: 'EA',
replace: true,
scope: {
width: '=',
animate: '='
},
template: '

',
link: function(scope, element) {
var oldWidth = scope.width;
element.css('width', oldWidth + '%');
scope.$watch('width', function(width) {
$transition(element, {width: width + '%'});
oldWidth = width;
});
}
};
}]);

On 4 March 2013 10:45, Tasos Bekos notifications@github.com wrote:

I have created a directive for progress bars based on twitter's bootstrap
component.

I wanted to be a wrapper for bootstrap's html with value binding,
animation changes and support for stacked bars.

It is still has bugs but i made an early plnkr to see if you are
interested in this. See here:
http://plnkr.co/edit/FDi7IHEcD4VjuJ7wWwzK?p=preview

@angular-ui https://github.com/angular-ui I will appreciate your
opinion on this, and if it is OK for this project, i can prepare a PR.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/187
.

[pkozlowski-opensource]

Yeh, I was thinking about the progress bar a bit for a moment but at the time I thought it is not worth it. But now with the $transitions support we've got actually something to offer. I guess now this is somehow on the bordeline, as alert.

But I would say let's open a PR and see. In any case we need to make sure class names don't make it into directive's JS code.

[imcotton]

Just want to mention here that when use progress directive with ng-hide or ng-show together, in order to access variable in current scope, you're gonna have to invoke $parent, like this:

<progress ng-hide="$parent.updated"></progress>