Dynamically Change Bar Percentage

Question

I have this bar percentage and I wanted to dynamically change the value of it only I’m not getting it.

Bar code

<script>
$('.bar-percentage[data-percentage]').each(function () {
  var progress = $(this);
  var percentage = Math.ceil($(this).attr('data-percentage'));
  $({countNum: 0}).animate({countNum: percentage}, {
    duration: 2000,
    easing:'linear',
    step: function() {
      // What todo on every count
      var pct = Math.floor(this.countNum) + '%';
      progress.text(pct) && progress.siblings().children().css('width',pct);
    }
  });
});
</script>
<div id="bar-5" class="bar-main-container">
              <div class="bar-percentage" data-percentage="51"></div>
              <div class="bar-container">
                <div class="bar"></div>
            </div>
          </div>

Code I used to try to change Dynamically

<script>
$('.bar-percentage').attr('data-percentage','60')//irá receber um valor diferente depois de efectuar cálculos
</script>

Answer 1

I reworked your function to give a load in progressBar, take a look:

I created the function changePercentage(), on it you inform the progress bar that you want the load. If you only tell progressBar, it will capture the new bar value by the attribute data-percentage, if you want a new value other than that of this attribute just put in the second argument of the function.

Example:

$(document).ready(function() {
  function changePercentage(progress) {
    var percentage = arguments.length > 1 ? arguments[1] : progress.attr('data-percentage')
    percentage = Math.floor(percentage);
    var bar = progress.siblings().children();
    bar.stop().animate({
      width: percentage * progress.width() / 100
    }, {
      duration: 2000,
      easing: 'linear',
      step: function() {
        var cdt = Math.round(100 * bar.width() / progress.width());
        progress.text(cdt + "%");
      }
    });
  }

  changePercentage($('.bar-percentage')); // Captura o novo valor do data-percentage

  $('button').click(function() {
    changePercentage($('.bar-percentage'), 10); // Captura o valor do segundo argumento (10)
  });
})

.bar-container {
  width: 100%;
  background: #c7c7c7;
  height: 30px;
}

.bar-container .bar {
  background: #333;
  height: 30px;
  width: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bar-5" class="bar-main-container">
  <div class="bar-percentage" data-percentage="51"></div>
  <div class="bar-container">
    <div class="bar"></div>
  </div>
</div>

<br>

<button>Mudar porcentagem para 10%</button>