crisbeto / angular-svg-round-progressbar Goto Github PK

Hello,
I wanted to add border to this circle both from inside and outside. Is there a way to customize? If yes then how?

Regards,
Shraddha

I am having this issue only in Chrome Version 44.0.2403.89 (64-bit). Is it known issue or a new bug? Thanks

Is there an option to start the iteration of the bar on hover?

thanks for this wonderful module, but it not exactly centred vertically. in safari it completely off.

Visiting https://crisbeto.github.io/angular-svg-round-progressbar/ in safari shows it.

In Chrome and Firefox, i see that the styles get assigned are

    top: 50%;
    bottom: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-size: 21px;

setting both top and bottom to 50% leaves the text to be of zero height, may be the css needs to be reconsidered

I have added the library to my hybrid app project in Ionic framework to show user rating but it works some time and does not work many times

First of all great directive.

I am using your directive to show how many percentage of some duration completed (some kind of task duration). It is working like a charm. Now I want to design a scheduler by using your directive.In my mind it will be like a clock and user can set start time for task and set duration as well and I want only selected part to be colored. Right now there is no start point options so my question is there any workaround you can suggest or am I missing something?

an example view of how I want to do is something like that. In that example I indicate task will start at 4 and finish at 8...

Can we make it? I found that valid use case is responsive layout.

I think it should essentially do viewBox instead of width and height (not sure if there's a reason to use it with the option switched off). I can PR my own fix, once I will merge it with latest commits.

I'm wondering if there's an easy way to set specific bar colors for various percentages similar to what I'm doing over here, currently using the old spritesheet technique http://ancientbeast.com/units/#Miss_Creeper

can the progress bar be updated with one side butt and other side rounded?

Design very nice, helpful.
It would be nice if a version without being round, making him straight.

Sorry for the bad english.
Thank you.

Is it possible to animate the circle counter clockwise?

I'm facing a problem rendering the progressbar when the value exceeds the max value defined in the div parameter.

I want to display percents, so my max value should be 100, but i could need to display a percent value higher than 100, in which case I would like to show the bar full filled and the value.

A quick fix for me would be to write a function that returns the highest value between 100 and the current value and set that as the max value.

In the attached image below:

• a) The problem I got: max value is 100, current is 146.
• b) I set 200 as max value to show that in that case it renders ok.

Hi there :)

We are using version 0.3.7 and the suggestion listed here #29 is not working.
When we set the color to a solid #F00 it works fine.

Any suggestions?

Example:

<div
          round-progress
          max="dailyTarget"
          current="consumption"
          color="{{ (consumption / dailyTarget < 0.75) ? '#F0B840' : '#6C3' }}"
          bgcolor="#eaeaea"
          radius="110"
          stroke="20"
          semi="true"
          rounded="false"
          iterations="50"
          animation="easeInOutQuart">
</div>

$scope.consumption = 5;
$scope.dailyTarget = 3;

$scope.consumption will be set to 3.

I am not exactly sure whether it's a bug or intended behavior. On one hand, it makes sense that current is set to the widget current value even if it's not the original value. However, the widget is responsible for display only and it's not updating or pulling data from anywhere so I'd call it unexpected behavior.

If @crisbeto agrees that it's a bug, I'd like to fix it and submit a PR.

I have looked the documentation and I can't find it, how do I put the progress in the middle of the round progress bar as it is on the demo?

It'd be great to be able to style the bar via CSS. Currently I had to comment out the css setting code. The reason we do this is because we theme a site via LESS files which derive their colors from LESS variables.

ring.css({
//    "stroke"         : service.resolveColor(options.color),
//    "stroke-width"   : stroke,
    "stroke-linecap" : options.rounded ? "round" : "butt"
});

And the background css as well

background.attr({
    "cx" : radius,
    "cy" : radius,
    "r"  : backgroundSize >= 0 ? backgroundSize : 0
});
// .css({
//     "stroke"       : service.resolveColor(options.bgcolor),
//     "stroke-width" : stroke
// });

Example: animation-delay: 50ms

This could be useful to interact with other page animations.

By the way, great lib!

Hey,
do you have any plan to provide a simple linear version of progress bar component?

I know that i might seem stupid, but it doesn't work to me. First, at the beggining, in section, i added "<script src="js/roundProgress.js"></script>", and later, where i want progressbar to be, i added "

This is more a question than an issue.

I have a use case where I need to re-animate the progress bar to show the user's current progress from zero. The actual current value may or may not have changed, but for the UX, I need to re-display where they are. How would I re-run the animation?

Also, is it possible to programatically decide when to start, stop and restart the animation from my controller? Consider if showing the progress bar is dependent on some part of an app animating - if it exists in the page already, the user won't see the animation.

I am attempting to use your progress bar in a custom directive with which I can pass in values easily to many instances of progress bars. However, using angular's {{variable}} notation is not working as far as I can tell. Here's what I'm doing:

<div round-progress
       max="{{thing}}"
       current="50"
       color="#F96302"
       radius="50"
       stroke="15"
       semi="false"
       rounded="false"
       clockwise="true"
       responsive="false"
       duration="1200"
       animation="easeInOutQuart">
</div>

And I get the following error:

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{thing}}] starting at [{thing}}].
http://errors.angularjs.org/1.4.7/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bthing%7D%7D&p4=%7Bthing%7D%7D

Interestingly, I do not get this error when I attempt this syntax with the radius parameter, and passing in {{thing}} as the value there does not result in any errors.

thing is defined on my controller as $scope.thing = 200

Any chance you can help me figure this out? I love your package and would love to keep using it!

Hey I'm using this progress bar for a music player and I just wanted to know if there was a seek to specific point function by touching the path?

I could see that there are options to be able to colour the stroke, and the background of the stroke but there isn't any option to fill the circle.
Or have I missed something.

Thank you for a very useful directive!

Feature request: allow the color attribute to be updated dynamically by parent.

Use case: I use the progress bar in a manner similar to your demo (a "task" counter). The color is set to show relative progress. In my use case, there is no need to $watch color as it only changes if the current parameter changes -- just need the latest color value to be used whenever current changes.

I think can be done by changing color to a bi-directional binding and passing it to the path attributes via updateState().

Thanks...

When it's the initial loading it gives 2 errors like

Error: Invalid value for attribute d="M NaN NaN A 47.5 47.5 0 1 0 50 2.5" <----> jquery.js:6990
Error: Invalid value for attribute d="M NaN NaN A 47.5 47.5 0 1 0 50 2.5" <----> jquery.js:6990

<div round-progress
                    max="100"
                    current="vm.avg.count"
                    color="#45ccce"
                    bgcolor="#eaeaea"
                    radius="50"
                    stroke="5"
                    iterations="50"
                    animation="easeInOutQuart">
</div>

Any idea?
FYI : I'm using a ControllerAs 'vm'

I'd be happy to add build-system support (grunt, gulp, brunch) to the repo, if you are interested.
A trick I have used is to keep just the source files in the repo, then send the minified version & a demo over to the gh-pages branch. That way, you get a kind of CDN, but your repo just has source files.

Would be a fantastic tool for data displays if the stroke could be filled with several different colors. I did notice that you can dynamically change the fill of the entire stroke, but it would be even more amazing if you could have it so that part of it would be a certain color and part of it another.

If i set the max to 900 and the current to 600,
Instead of seeing the circle 1 3rd complete already
it looks like the max sets itself to be the current then it starts from there.

Is this working as intended?

The size is calculated incorrectly, and excess padding is introduced. Here.

The upload progress demo shows that percentages are possible but the documentation for the options do not indicate how to accomplish this.

Is it possible to put picture inside the round progressbar? and I want to know how do you implemente clock example.

Can I get semi circle progress bar inverted with all its current functionality?

Hi Chris,

great control! I want to time the from-to so that for example 0-100 takes 1 second.

You have the iterations attribute, but how can you convert that to a particular time?

Thanks!

Rogier

error: invalid value for attribute d="m nan nan a 100 100 0 1 0 103 3"

Fixed from here: http://stackoverflow.com/questions/25923377/svg-invalid-value-for-path

I used ionic framework (side-menu), when i toggle the side menu bar, it caused this
Error: easingAnimation is not a function. (In 'easingAnimation(currentTime, start, changeInValue, duration)', 'easingAnimation' is undefined)

Is it the animation conflict with ionic side menu animation ?

Your system information:

Cordova CLI: 5.0.0
Gulp version: CLI version 3.9.0
Gulp local:
Ionic Version: 1.1.0
Ionic CLI Version: 1.6.4
Ionic App Lib Version: 0.3.8
ios-deploy version: Not installed
ios-sim version: 3.1.1
OS: Mac OS X Yosemite
Node Version: v0.12.2
Xcode version: Xcode 7.1 Build version 7B91b

Any plans to a version that is not dependent on angular?

Will it support ng-repeat?

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?

What about an event or callback to know when counter value changed (1,2,3,4,5,6,...)?
Parent controller will know each time value changing and can use to output current value or calculate percentage or whatever consumer want to display.

I think it would be neat if there was a way to be able to set default values for this on the whole app. At least in our case, it should look identical each time we use it, this would save a lot of time!

Hi,

I'm quite new to angular, and I'm using your round progress bar in a school project. I'm wondering how to get a label inside the progress circle? I have looked at the source code for your demo, but I still can't seem to get the progress numbers to show up inside the circle, the numbers only show up above the circle. Everything else works, except the placement of the numbers.

<div class="progress-wrapper"  ng-style="{'font-size': getFontSize()}">

        <div class="progress">
            {{ sp.current }} / {{ sp.max }}
        </div>

        <div
        round-progress
        max="sp.max"
        current="sp.current"
        color="#45ccce"
        bgcolor="#eaeaea"
        radius="65"
        stroke="15"
        semi="false"
        rounded="false"
        clockwise="true"
        iterations="75"
        animation="easeInOutQuart">
    </div>
</div>

Consider to support latest version 1.3.14 of angular in bower.json

I'm using this as a small dashboard which shows 6 svg circles with different values. I tried to specify custom width to make circles small but I couldn't. Any help please?
something like this in the image:

I am trying to run this with angular material in one of the flex containers but it doesnt seem to work. Have you have this issue as well?

This is also more of a question than an issue.

I'm using the progressbar within an ng-repeat. How can I animate each of the progress bars separately? I'm currently using a function like the one seen here to update the 'current' attribute https://fiddle.jshell.net/c1k13uaa/3/

But by using this method, all of the progress bars share the same 'current' value, and are all animating at the same time.

How can I add a text in middle of the cycle saying 50% or any...

Thanks! Nice directive.

Hi,
i am using it as directive, cannot add the text in the middle.
my code:

its great progress bar, but I am facing an issue with tab interface, its seems animation is not showing on switching tabs.

It only show on hard refresh, I think animation should only fire when the tab content is visible.

I am using simple this in official tab component found here https://angularjs.org/#create-components

Please let me know is there any way I can show animation on tab switch, every tab has its own directive.

<div
max="total"
current="percent"
color="#e84d51"
bgcolor="#623a45"
radius="100"
responsive="true"
animation-delay="500"
stroke="1"
round-progress
></div>

I think if you can add and attribute replay="true" or something it will be nice to control the animation