search

bootsoon / ng-circle-progress

A simple circle progress component created for Angular based on SVG Graphics.
https://bootsoon.github.io/ng-circle-progress/
MIT License
250 stars 85 forks source link

Feature Request: Overlap when percent is greater than 100% #140

Open philmerrell opened 3 years ago

philmerrell commented 3 years ago

Wonderful Library!

I'm curious is there is a way to represent a value that is greater than 100% visually. For reference, I'm thinking of something similar to how Apple Watch displays progress:

image

Where the use of gradient and drop shadow give the illusion of depth when overlapping.

bootsoon commented 3 years ago

Interesting feature. But what about representing a value greater than 200%?

philmerrell commented 3 years ago

Good question. Taking from the Apple Watch example, values of 200% (or whatever percent) would be represented by circling multiple times around.

So in this case, if the progress was relative to 100% and the value was 200%, then the progress bar would animate in a circle twice. For 300%, it would animate 3 times in a circle, etc. The key visual indication would be the animation.

This would be tough to represent with animations off. With animations off, the percent value would most likely need to be displayed. But I imagine this is the case for values greater than 100% already. I think it is safe to assume people think a complete circle represents 100% unless otherwise indicated.

It might also be useful to create a relative value, meaning the percent that one circle represents. That way if the value was 1000%, it wouldn't need to necessarily animate in a circle 10 times. For instance, if the relative value was 500% and the value was 1000%, the animation would only circle around twice.

Anyway, just some thoughts. Again, great library.

bootsoon commented 3 years ago

There's no need to show difference between 150% and 250% in circle. If so, we can just show the numeric percentage.

image

daerogami commented 1 year ago

There's no need to show difference between 150% and 250% in circle.

I can think of a context where someone would want to recreate an overlap idea similar to the "overshields" ui concept made popular by games like Marathon and Halo. I agree for most cases, once you exceed 100%, the target is passed and metrics may begin to lose meaning. We are currently looking into having the first hundred percent as blue, the subsequent cycle would be red with the blue background, then everything past 200% with the red background. "No need" may be an overstatement.