Nested progress bars?

[RobertHerhold]

I realize this would require an immense amount of re-writing, but do you think it would be possible to have individually-configurable nested progress bars?

[crisbeto]

Technically it should be possible, because svg allows nesting other svg elements, although after a bit of fiddling around I found a couple of problems:

1. The directive is using .find to get a hold of the path and the circle, if there's another nested svg, it picks up its children as well. This can be fixed easily.
2. Angular throws an error if one round progressbar is nested into another. I believe its because Angular can't find the element because it gets transcluded. I'm not quite sure how to fix this one.

EDIT: I tried to reproduce a minimal example of nesting a directive with transclusion and it seems to work just fine, something else must be causing that error. http://plnkr.co/edit/vbRW2FfLEG39zt5HWH6n?p=preview

[crisbeto]

It has been a while since this issue was posted, but with the changes in https://github.com/crisbeto/angular-svg-round-progressbar/commit/4af45d3293bbfacd9b39782bfff8ec7003e77cb3 it's now possible to nest progressbars. I'm working on making this a little more convenient, but here's what can be done now:

[RobertHerhold]

That looks amazing! Thanks for implementing this :)

[crisbeto]

Released in 0.3.6

[JCMais]

@crisbeto Would it be possible to have something like this

[crisbeto]

You might have some luck with nesting a few progressbars and adding a rotation to the path, but I think built-in support is out of the scope of the project. Your example is more of chart than a progressbar.

[JCMais]

In reality they are multiple progress bar stacked one after the other, think on it as a queue. I will take a look on what you said.

[JosnaPriyaPereira]

@crisbeto , I am using below code to nest 2 round progress bars.

<round-progress max="100" current="20" color="red"> <round-progress max="100" current="20" color="blue" offset="30"> The progress bars display fine in chrome simulator in Ios devices, but only the outer bar appears in xcode iphone simulator. Also only a single bar appears in the actual ios device.

Can you please help?

[knx-am]

@crisbeto Is this feature supposed to be still working in the Angular 1 version (0.4.8)? I tried it but the bars are rendered above each other. The inner svg does not have the viewBox attribute but that has no effect. Am I missing something? Thanks for helping

[crisbeto]

You can try setting the offset option to "inherit" which should prevent the progress bars from going beneath each other.

[knx-am]

I copied the example from build/index.html and adjusted it and now it works! I tried the offset attribute before and it didn't help. I was probably doing something else wrong. Thanks again

[khaled9544]

is this feature is still available? I'm trying to implement nested progress bar by adding nested attribute

<round-progress [current]="80" [max]="100" [color]="'#45ccce'" [background]="'#eaeaea'" [radius]="125" [stroke]="20" [semicircle]="false" [rounded]="true" [clockwise]="false" [responsive]="false" [duration]="800" [animation]="'easeInOutQuart'" [animationDelay]="0" [offset]="'inherit'"> <round-progress [current]="80" [max]="100" [color]="'#45ccce'" [background]="'#eaeaea'" [radius]="75" [stroke]="20" [semicircle]="false" [rounded]="true" [clockwise]="false" [responsive]="false" [duration]="800" [animation]="'easeInOutQuart'" [animationDelay]="0"></round-progress> </round-progress>

Also I tried the offset but nothing work!

Any help please? Thanks.

[crisbeto]

@khaled9544 it was available on the AngularJS version of the component, but I haven't ported it to Angular yet.

[jongbonga]

@khaled9544 it was available on the AngularJS version of the component, but I haven't ported it to Angular yet.

Hi @crisbeto thanks for the plugin.

Any luck with this?