Progressbar.js - 如何获得第二个圈子?
Progressbar.js - how to get a second circle?
我目前正在尝试使用 progressbar.js
在我的文档中获得第二个进度条
我已经设法得到一个甚至从 html 文档中的圆的值属性中绘制进度条百分比的方法。到目前为止,我无法让第二个工作。有人可以帮我吗?
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/
我只需要在一个页面中显示多个进度条。如果有人能帮助我,我会很高兴。
相同的 class 名称会在此处产生冲突
我给第二个添加了 progress2
class 值
<div class="progress" value="75"></div>
<div class="progress2" value="25"></div>
我目前正在尝试使用 progressbar.js
在我的文档中获得第二个进度条我已经设法得到一个甚至从 html 文档中的圆的值属性中绘制进度条百分比的方法。到目前为止,我无法让第二个工作。有人可以帮我吗?
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/
我只需要在一个页面中显示多个进度条。如果有人能帮助我,我会很高兴。
相同的 class 名称会在此处产生冲突
我给第二个添加了 progress2
class 值
<div class="progress" value="75"></div>
<div class="progress2" value="25"></div>