How to increment a bootstrap progress bar?

Question

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:

<div class="progress progress-striped active">

<div id="progressbar" class="bar" style="width: 0%;"></div>

User Input Example: Code:

Set Seconds:

<input type="text" id="speed" value="10" /> 

<input type="submit" value="Start" onclick="doProgress();" />

Java Script {needed}:

Code:

 <script type="text/javascript">
 function doProgress()

 { 

 Idk :( Please help.

 };
 </script>

(style="width: 0%;") Is the progress bars value 100% being maximum.

I want the value to increase in accordance to the users set value in seconds using this element I provided:

<input type="text" id="speed" value="10" />

example: the user enters 30 I want it to take 30 seconds for the progress bar to reach 100%

change the CSS `width` propery of `#progressbar` `+1` until you reach `100`, a simple loop will do it — Gntem, Aug 31 '12 at 15:47

Steve Valliere · Accepted Answer · 2012-08-31T16:09:51.113

3

Something like this (untested):

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

edited Aug 31 '12 at 16:09

answered Aug 31 '12 at 15:55

Steve Valliere

1,882
12
31

You want it to increase slowly over time? or you want it to just wait that long after they click it to set it to 100%? – Steve Valliere Aug 31 '12 at 15:56
Increase over time for example the user puts 30 seconds I want the progress bar to move to 100% over the 30seconds not just instantly jump to 100% – Koala Aug 31 '12 at 15:59
How about that? Updated my answer. – Steve Valliere Aug 31 '12 at 16:13

score 2 · Answer 2 · answered Apr 28 '16 at 14:09

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 seconds
  easing: '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.

Kyle · Answer 3 · 2018-02-06T18:35:51.047

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);

});

score 0 · Answer 4 · answered Aug 31 '12 at 15:48

0

Try this:

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

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

answered Aug 31 '12 at 15:48

Daniel Pokusa

236
1
10

I want the value to increase in accordance to the users set value in seconds using this element I provided: example the user enters 30 I want it to take 30 seconds for the progress bar to reach 100% – Koala Aug 31 '12 at 15:50

How to increment a bootstrap progress bar?

4 Answers4

Linked