CODEWITHSUNDEEP
javascriptjquerycssprogress-bar
Stephan-v
Stephan-v

Reputation: 20309

Progressbar.js - how to get a second circle?

I'm currently trying to get a second progressbar in my document with progressbar.js

I've managed to get one that even draws the progressbar percentage from the value attribute of the circle in the html document. So far I can't get the second one working. Could anybody help me out here?

http://codepen.io/stephan-v/pen/MwQQzJ

var startColor = '#FC5B3F';
var endColor = '#9ec64d';

window.onload = function onLoad() {
    var circle = new ProgressBar.Circle('.progress', {
        color: startColor,
        duration: 3000,
        easing: 'bounce',
        strokeWidth: 8,

        // Set default step function for all animate calls
        step: function(state, circle) {
            circle.path.setAttribute('stroke', state.color);
        }
    });

    // This will get the number from the page
    var value = ($('.progress').attr('value') / 100);

    // This will determine the circumference of the circle
    circle.animate(value, {
        from: {color: startColor},
        to: {color: endColor}
    });
};

I've got the javascripts from: http://kimmobrunfeldt.github.io/progressbar.js/

I just need to display multiple progressbars in a single page. I would be so happy if somebody could help me out.

Upvotes: 2

Views: 1558

Answers (1)

Özgür Ersil
Özgür Ersil

Reputation: 7013

Same class names make a conflict here

I added progress2 class value to second one

<div class="progress" value="75"></div>
<div class="progress2" value="25"></div>

codepen example

Upvotes: 3

Related Questions