I'm working on a project with progressbar.js and I want to have multiple progress bars on my page. There is a dynamic amount so I'm not sure ahead of time how much progressbars I will have on the page.

I my JSFiddle I have simply duplicated the code and gave the second progressbar a .progress2 class. Ideally I would want to have the progressbar working for each element by simply giving it a .progress class

/

var circle = new ProgressBar.Circle('.progress', {
    color: startColor,
    easing: 'linear',
    strokeWidth: 8,
    duration: 1500,
    text: {
        value: '0'
    }
});

Obviously I guess I would start by gathering the values and putting those into an array but I can't even get that working. Could somebody give me a push in the right direction since I'm not that good with javascript.

I would be really grateful if somebody would take a look and tell me if this can even be done the way I would want it.

I'm working on a project with progressbar.js and I want to have multiple progress bars on my page. There is a dynamic amount so I'm not sure ahead of time how much progressbars I will have on the page.

I my JSFiddle I have simply duplicated the code and gave the second progressbar a .progress2 class. Ideally I would want to have the progressbar working for each element by simply giving it a .progress class

http://jsfiddle/8xa87k31/497/

var circle = new ProgressBar.Circle('.progress', {
    color: startColor,
    easing: 'linear',
    strokeWidth: 8,
    duration: 1500,
    text: {
        value: '0'
    }
});

Obviously I guess I would start by gathering the values and putting those into an array but I can't even get that working. Could somebody give me a push in the right direction since I'm not that good with javascript.

I would be really grateful if somebody would take a look and tell me if this can even be done the way I would want it.

• javascript
• jquery
• arrays
• oop
• progress-bar

Share Improve this question Follow asked Jul 13, 2015 at 22:23 Stephan-vStephan-v 20.4k3232 gold badges124124 silver badges211211 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Evening Stephan,

I think this is what you're looking for: http://jsfiddle/8xa87k31/499/

$('.progress').each(function() {
    var circle = new ProgressBar.Circle(this, {
        color: startColor,
        easing: 'linear',
        strokeWidth: 8,
        duration: 1500,
        text: {
            value: '0'
        }
    });

    var value = ($(this).attr('value') / 100);

    circle.animate(value, {
        from: {
            color: startColor
        },
        to: {
            color: endColor
        },
        step: function(state, circle, bar) {
            circle.path.setAttribute('stroke', state.color);
            console.log(circle);
            circle.setText((circle.value() * 100).toFixed(0));
        }
    });
});

See? No big deal! :-)

NB: I'm convinced, this could be improved.