I use ProgressBar.js 0.9.0 to output a round progress bar

initialization happens like this

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

In this block, a green circle appears when loading 100 and a half circle when loading 50, etc.

  <div class="progress" data-online="100"></div>

The problem is that if the value is greater than 100, then the circle takes another turn and is already decreasing, not increasing.

How to do that if the value of data-online is more than 100, the progress bar stopped at 100, and not for example at 190. I saw max-data-online, but I don’t understand how to implement it ...

Here is a link to the sandbox where you can see clearly https://jsfiddle.net/l2banners/aoc37b2b/

  • Видел max-data-online но как его внедрить я не понимаю. - What does "how to implement it" mean? - Alexey Shimansky
  • How to make it work, I tried to prescribe <div class = "progress" data-online = "100" max-data-online = "100"> </ div> but nothing has changed, it must somehow be added to js what would work ... - l2banners
  • ahhh I seem to understand what you want instead of circle1.animate($('#progress1').attr('data-online')/100); write circle1.animate($('#progress1').attr('data-online')/$('#progress1').attr('data-max-online')); .... mm? - Alexey Shimansky
  • No, I tried it the same way ... - l2banners
  • one
    jsfiddle.net/je654p6k/1 is it? - Alexey Shimansky

1 answer 1

 window.onload = function onLoad() { var circle1 = new ProgressBar.Circle('#progress1', { color: '#14AA18', duration: 3000, easing: 'easeInOut', strokeWidth: 10, trailWidth: 10, trailColor: '#eee', }); circle1.animate(Math.min($('#progress1').attr('data-online')/100, 1)); };
  • Thank you very much, this is exactly what you need and now everything works as it should, the previous solution was also quite good, but there is one problem in it. - l2banners