Progressbar.js-如何获得第二个圆？

Question

我目前正在尝试使用progressbar.js在文档中获得第二个进度栏

我设法从html文档中的圆的value属性中获取了一个进度条百分比。 到目前为止，我无法使第二个工作。 有人可以帮我吗？

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}
    });
};

我从以下网址获得了JavaScript： http ： //kimmobrunfeldt.github.io/progressbar.js/

我只需要在一个页面中显示多个进度条。 如果有人可以帮助我，我会很高兴。

Answer 1

相同的班级名称在这里引起冲突

我在第二个课程中添加了progress2类的值

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

代码笔示例