Я использую ProgressBar.js 0.9.0 для вывода круглого прогрессбара
инициализация происходит вот таким способом
$(document).ready(function(e) {
$('.progress').each(function(index, element) {
index = index+1;
$(element).attr('id','progress'+index);
});
});
window.onload = function onLoad() {
var circle1 = new ProgressBar.Circle('#progress1', {
color: '#14AA18',
duration: 3000,
easing: 'easeInOut',
strokeWidth: 10,
trailWidth: 10,
trailColor: '#eee',
});
circle1.animate($('#progress1').attr('data-online')/100);
};
в этом блоке появляется зеленый круг при загрузке 100 и пол круга при загрузке 50 и т.д..
<div class="progress" data-online="100"></div>
Проблема в том что если значение больше чем 100, то круг делает еще один оборот и уже уменьшается, а не увеличивается.
Как сделать что бы при значении data-online больше 100 прогресс бар останавливался на 100, а не к примеру на 190. Видел max-data-online но как его внедрить я не понимаю...
Вот ссылка на песочницу где можно увидеть наглядно https://jsfiddle.net/l2banners/aoc37b2b/
Видел max-data-online но как его внедрить я не понимаю.
- что значит "как его внедрить"?circle1.animate($('#progress1').attr('data-online')/100);
написатьcircle1.animate($('#progress1').attr('data-online')/$('#progress1').attr('data-max-online'));
.... мм?