Animation duration

[bgadiel]

Hi, Got an issue with the animation duration - I am using this progress bar inside of a custom directive:

<svg-round-progressbar
                    data-value="{{vm.value}}"
                    data-limit="{{vm.limit}}"
                    data-colors="['f5d976']">
</svg-round-progressbar>

I am passing the values from parent controller when they arrive into the directive. I use $observe inside the directive to know when the values arrive:

function SvgRoundProgressbar() {
        var directive = {
            restrict: 'E',
            scope: {
                value: '@',
                limit: '@',
                colors: '='
            },
            link: link,
            templateUrl: 'app/widgets/svg-round-progressbar.html'
        };
        return directive;
    }

    function link(scope, element, attrs) {
        attrs.$observe('limit', function (value) {
            ///// some code  //////
        });
    };

and my svg-round-progressbar.html is:

<div
    round-progress
    max="limit"
    current="value"
    color="{{color}}"
    bgcolor="#EEF2F5"
    radius="120"
    rounded="true"
    clockwise="true"
    responsive="responsive"
    stroke="13"
    animation="linearEase"
    animation-delay="1000"
    duration="100000">

My problem is if I write max="limit" the animation is going too fast to notice when the page loads, even if with duration of 80000. duration works only when the max value ="limit*10". Any ideas how can I control the animation duration? or what causes it to slow when the max value is very big?

thanks.

[crisbeto]

Strange, the max shouldn't really have an effect on the animation, except if your current is a lot bigger than limit.

[bgadiel]

yes, my current is a lot bigger. How do I control the animation of coloring the circle at loading? shouldnt duration control that? בתאריך 3 במאי 2016 12:26 אחה״צ,‏ "Kristiyan Kostadinov" < notifications@github.com> כתב:

Strange, the duration shouldn't really have an effect on the animation, except if your current is a lot bigger than limit.

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/crisbeto/angular-svg-round-progressbar/issues/71#issuecomment-216477459

[crisbeto]

No because the easing functions look at the current as a percentage of the max. You can try flipping them around and using the bigger value as the max.

[bgadiel]

got it. I just needed to bring max and current values to the same scale as possible. They were too far - 250K out of 100K. thanks.