How To Increment A Bootstrap Progress Bar?

I have just started out with .php/Java can someone show me how to get my bootstrap progress bar to increment in accordance with a users set time. Progress Bar: Code:

Solution 1:

Something like this (untested):

functiondoIncrement(increment) {
  w = parseInt(document.getElementById('progressBar').style.width);
  document.getElementById('progressBar').style.width= (w + increment) +'%';
}

var w
var speed = document.getElementById('speed').value;
var increment = (speed/100);
for(var x = 0; x<speed; x++)
{
  setTimeout(doIncrement(increment),1000);
}

Solution 2:

The setTimeout approach (as per other answers) is the most common approach for animating time-based progress.

But I've had a problem with setTimeout if the speed is fast or when I want to reset the bar from 100% to 0%, as the default Bootstrap css transitions lead to undesirable animation effects (i.e takes 0.6 seconds to return to 0%). So I suggest tweaking the transition styling to match the desired animation effect e.g

pb = $('[role="progressbar"]')
// immediate reset to 0 without animation
pb.css('transition', 'none');
pb.css('width', '0%');
// now animate to 100% with setTimeout and smoothing transitions
pb.css('transition', 'width 0.3s ease 0s');
var counter = 0;
var update_progress = function() {
  setTimeout(function() {
    pb.attr('aria-valuenow', counter);
    pb.css('width', counter + '%');
    pb.text(counter + '%');
    if(counter<100) {
      counter++;
      update_progress();
    }
  }, 5 * 1000 / 100); // 5 seconds for 100 steps
};
update_progress();

But if you're in the jQuery camp, then jQuery.animate is I think a neater approach as you can forget having to mess with css transition styling and counting steps etc e.g.

pb = $('[role="progressbar"]')
pb.css('transition', 'none'); // if not already done in your css
pb.animate({
  width: "100%"
}, {
  duration: 5 * 1000, // 5 secondseasing: 'linear',
  step: function( now, fx ) {
    var current_percent = Math.round(now);
    pb.attr('aria-valuenow', current_percent);
    pb.text(current_percent+ '%');
  },
  complete: function() {
    // do something when the animation is complete if you want
  }
});

I've put a demo and more discussion on GitHub here.

Solution 3:

I'm just learning bootstrap myself and came up with this for advancing it. As mentioned in other answers, the width CSS property appears to be what triggers the animation, but I initially didn't notice it and set the related aria attribute. You probably want to ensure setting the width results in other related attributes getting properly updated if a11y is important to you, setting them as necessary if not.

$( function() {
  var bar = $('div.progress-bar');
  var val = null;

  i1 = setInterval(function() {
    val = parseInt(bar.attr('aria-valuenow'));
    val += 10;
    console.log(val);
    if( val < 101) {
      bar.attr('aria-valuenow', val);
      bar.css('width', val + '%');
    } else {
      clearInterval(i1);
    }
  }, 1000);

});

Solution 4:

Try this:

//Find the div you want to updatevar divArray = document.getElementById('progressbar');

//Set the width style
divArray.style.width = '100%';

Share