this is a test1
</div>
<div class="progress" id="progress2" data-color="#fff" data-from="#bbb" data-to="#000">
<div class="c-content">
this is a test2
</div>
</div>
<div class="progress" id="progress3" data-color="#fff" data-from="#bbb" data-to="#000">
<div class="c-content">
this is a test3
</div>
</div>
</div>
$('.progress').hover(function () {
var circle = new ProgressBar.Circle(this, {
strokeWidth: 2,
from: { color: $(this).attr('data-from') },
to: { color: $(this).attr('data-to') },
duration: 1000,
easing: 'easeInOut',
step: function (state, circle, attachment) {
circle.path.setAttribute('stroke', state.color);
}
});
circle.animate(1);
},
function () {
var circle = new ProgressBar.Circle(this, {
strokeWidth: 2,
color: $(this).attr('data-color'),
duration: 1000,
easing: 'easeInOut'
});
circle.animate(1);
}
);
window.onload = function onLoad() {
$('.progress').each(function (idx, p) {
console.log($(p).attr('id'));
var circle = new ProgressBar.Circle(p, {
strokeWidth: 2,
color: $(p).attr('data-color'),
//from: { color: $(p).attr('data-from') },
//to: { color: $(p).attr('data-to') },
duration: 2000,
easing: 'easeInOut'
});
circle.animate(1);
});
};